HTML Reference Manual

Complete List of HTML Tags

HTML: <canvas> Tag

HTML <canvas> tag is an HTML5element is used to draw2D object and bitmap images, etc., as a container for graphics. The actual graphics in this container are drawn using the <script> tag. This tag is also commonly referred to as the <canvas> element.

Online Example

Display a blue square using the <canvas> element:

Example

!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5　canvas by www.oldtoolbag.com</title>
</head>
<body>
<h1>Graphics Example</h1>
<canvas id="w3codebox_com_canvas" width="125" height="125></canvas>
<script>
　　var canvas = document.getElementById("w3codebox_com_canvas");
　　var ctx = canvas.getContext("2d");
　　ctx.fillStyle = "#4B6692";
　　ctx.fillRect(25,　25,　100,　100);
　　ctx.clearRect(45,　45,　60,　60);
　　ctx.strokeRect(50,　50,　50,　50);
</script>
</body>
</html>

Test and see ‹/›

In this HTML5In the document example, we used the <canvas> tag to create a container with a size of125px x 125px and ID of the container w3codebox_com_canvas.<script> tag is used to draw graphics within this container. In this example, we draw a blue square with a diagonal inside.

Browser Compatibility

IEFirefoxOperaChromeSafari

IE 9, Firefox, Opera, Chrome, and Safari support the <canvas> tag.

Note:IE 8 IE browsers of earlier versions do not support the <canvas> tag.

Definition and Usage of the Tag

<canvas> tag is used to draw graphics (such as charts and other images) through scripts (usually JavaScript).

The <canvas> tag is just a graphic container; you must use scripts to draw graphics.

The HTML <canvas> element is located within the <body> tag.
The <canvas> tag acts as a container for graphics. All graphics are drawn outside the <canvas> tag using the <script> tag with the canvas script API or WebGL API

HTML 4.01 with HTML5differences

The <canvas> tag is an HTML5 in the new tag.

Tips and Notes

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

Tip:To learn about all properties and methods of the canvas object, please refer toHTML Canvas Reference Manual.

Attribute

New: HTML5 in the new attribute.

Attribute	Value	Description
heightHTML5	pixels	Specifies the height of the canvas.
widthHTML5	pixels	Specifies the width of the canvas.

Global Attributes

Support for <canvas> tag HTML Global Attributes.

Event Attributes

Support for <canvas> tag HTML Event Attributes.

HTML: <caption> Tag HTML: <button> Tag