HTML <canvas>Tag


Examples

Use the <canvas> element to display a red rectangle:

<canvas id="myCanvas"></canvas> <script type="text/javascript"> var canvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100); </script>

Try it Yourself »

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

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

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

Tag Definition and Usage Instructions

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

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

Differences Between HTML 4.01 and HTML5

The <canvas> tag is a new tag in HTML5.

Tips and Notes

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

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

Attributes

New: New attribute in HTML5.

Attribute Value Description
heightNew pixels Specifies the height of the canvas.
widthNew pixels Specifies the width of the canvas.

Global Attributes

The <canvas> tag supportsHTML Global Attributes。

Event Attributes

The <canvas> tag supportsHTML Event Attributes。

Other Extensions