Canvas in HTML

HTML Canvas Graphics

HTML <canvas> element web page par graphics draw karne ke liye use hota hai.


What is Canvas in HTML?

HTML <canvas> element ka use JavaScript ke through on the fly graphics draw karne ke liye hota hai. <canvas> element sirf ek container hota hai graphics ke liye. Real drawing karne ke liye JavaScript use karna padta hai.

Canvas me alag-alag methods hote hain:

  • paths draw karne ke liye
  • boxes banane ke liye
  • circles banane ke liye
  • text likhne ke liye
  • images add karne ke liye

Canvas sabhi major browsers me supported hai.


Canvas Examples: 

Canvas in HTML ek rectangular area hota hai page me. By default canvas me na border hota hai na content. Markup aise dikhta hai:

Canvas in HTML

Note:

  • Hamesha id attribute specify karo (script me use karne ke liye).
  • Width aur height attribute define karo canvas ka size set karne ke liye.
  • Border add karna ho to style attribute use karo.

Basic empty canvas example:

Basic empty canvas example


Add a JavaScript

Rectangular canvas area create karne ke baad drawing karne ke liye JavaScript add karna zaroori hai.

Examples:

Draw a Line

Draw a Line


Draw a Circle

Draw a Circle


Draw a Text

Draw a Text


Stroke Text

Stroke Text


Draw Linear Gradient

Draw Linear Gradient


Draw Circular Gradient

Draw Circular Gradient

Leave a Comment