<canvas> tag in HTML5

The <canvas> tag is used to draw graphics using scripting language. It can be use for instance, to draw graphs, make photo composition or simple animations.

What is HTML Canvas?

  • The <canvas> element is used to draw graphics, on the fly, via JavaScript.
  • The <canvas> tag is use only as a container for graphics.
  • Must use JavaScript to actually draw the graphics.
  • Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

Example of <canvas> tag

The default size of the canvas is 300 px × 150 px (width × height). But custom sizes can be defined using the HTML height and width property.

Result Look Like

Draw a Line Example

Result Look Like

<canvas> Tag Browser Support

Element Chrome Edge Firefox Safari Opera
<canvas> 4.0 9.0 2.0 3.1 9.0

The <canves> Attributes

The <canves> element has only two attributes "width" and "height".

The "width" and "height" both attributes are optional, and it can also be set by using DOM properties.

When the <canvas> has no width & height attributes values, the canvas will initially be used the default values of (300 pixels) width and (150 pixels) height.

Global Attributes

Event Attributes

Advertise With Us

We offer sponsored posts and guest posts with do-follow links, back-links, and other advertising services, To advertise email us at ""

© 2021 GDATAMART.COM (All Rights Reserved)