THE WORLD'S LARGEST WEB DEVELOPER SITE

HTML <canvas> Tag


Example

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

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

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

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
<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>.

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.



Attributes

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

Global Attributes

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


Event Attributes

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


Default CSS Settings

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

Example

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