HTML5. W3Schools in English. The complete tag guide


HTML <canvas> Tag


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

<canvas id="myCanvas">
Your browser does not support the canvas tag.

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

More "Try it Yourself" examples below.

Definition and Usage

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

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

Any text inside the <canvas> element will be displayed in browsers with JavaScript disabled and in browsers that do not support <canvas>.

Tips and Notes

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

Tip: For a complete reference of all the properties and methods, please visit our HTML Canvas Reference.

Browser Support

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

<canvas> 4.0 9.0 2.0 3.1 9.0


Attribute Value Description
height pixels Specifies the height of the canvas. Default value is 150
width pixels Specifies the width of the canvas Default value is 300

Global Attributes

The <canvas> tag also supports the Global Attributes in HTML.

Event Attributes

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

More Examples


Another <canvas> example:

<canvas id="myCanvas">
Your browser does not support the canvas tag.

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
//Turn transparency on
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
Try it Yourself »

Default CSS Settings

Most browsers will display the <canvas> element with the following default values:


canvas {
  height: 150px;
  width: 300px;
Try it Yourself »