<canvas> tag

HTML5 <canvas> tag

Using the HTML5 <canvas> element, you can draw graphics on web page using JavaScript.

You must have basic knowledge on JavaScript to draw graphics.

The <canvas> element is only a container for a 2D Graphics. 

By default, <canvas> tag will be blank with no border or content. The default size is 300 * 150 px.

Click Here to learn about HTML5 Canvas in detail.

<canvas width=”width-value” height=”height-value”> <script>Add javascript</script></canvas>


<canvas id="myCanvas" width="400" height="200" style="border:2px solid slateblue;"></canvas>

Default CSS Value

height: 150px;
weight: 300px;

How Browser will display


Difference between HTML4.01, XHTML and HTML5

NA NA New tag in HTML5

Attributes used with <canvas> tag

Attribute Description
width To set the width of the canvas in pixels.
height To set the height of the canvas in pixels.

Global Attributes

The <canvas> tag supports Global attributes.

Event Attributes

The <canvas> tag supports Event attributes.

Supporting Browsers

supporting-browsers for tags

Related Tags


Tutorials for all brains!