HTML <canvas> Tag


Display a red rectangle with a <canvas> element:

<canvas id="myCanvas"></canvas>

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
Try it yourself »

Definition and Usage

The <canvas> Tags use scripts (usually JavaScript) to draw graphics (such as charts and other images).

The <canvas> Tags are just graphics containers, you must use scripts to draw graphics.

Browser Support

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

<canvas> 4.0 12.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>.

Tip: Learn more about the <canvas> element in our HTML Canvas Tutorial.

Tip: For a complete reference of all the properties and methods that can be used with the canvas object, go to our HTML Canvas Reference.


= New in HTML5.

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