HTML5 <canvas> Tag

Example

How to display a red square, with the canvas element:

<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>

Try it yourself »

Definition and Usage

The <canvas> tag is used to display graphics.

The <canvas> tag is only a container for graphics, you must use a script to actually paint graphics.


Differences Between HTML 4.01 and HTML5

The <canvas> tag is new in HTML5.


Tips and Notes

Tip: Any text inside the between <canvas> and </canvas> will be displayed in browsers that does not support the canvas element.


Attributes

New : New in HTML5.

Attribute Value Description
heightNew pixels Specifies the height of the canvas
widthNew pixels Specifies the width of the canvas

Standard Attributes

The <canvas> tag also supports the Standard Attributes in HTML5.


Event Attributes

The <canvas> tag also supports the Event Attributes in HTML5.