HTML <canvas> Tag

Example

Draw a red square, on the fly, and show it inside the <canvas> element :

 <canvas id="redsquarecanvas"></canvas>
<script>
var canvas = document.getElementById("redsquarecanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>  
Your browser does not support the HTML5 canvas tag.

Note : The canvas tag is not supported in Internet Explorer 8 and earlier versions.


Definition and Usage

The <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript).

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

Browser Support

The numbers in the table specify the first browser version that fully supports the element.

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

Differences Between HTML 4.01 and HTML5

The <canvas> tag is new in HTML5.


Tips and Notes

Note : Any text inside the <canvas> element will be displayed in browsers that does not support <canvas>.


Attributes

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

Default CSS Settings

None.