HTML5 <canvas> Tag


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');

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.


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.