Easy Tutorial
❮ Ref Charactersets Att Input Disabled ❯

HTML <canvas> Tag

Example

Display a red rectangle using the <canvas> element:

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

Browser Support

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

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


Definition and Usage

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

The <canvas> tag is just a container for graphics; you must use a script to actually draw the graphics.


Differences Between HTML 4.01 and HTML5

The <canvas> tag is new in HTML5.


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 the properties and methods of the canvas object, see HTML Canvas Reference.


Attributes

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

Global Attributes

The <canvas> tag supports HTML Global Attributes.


Event Attributes

The <canvas> tag supports HTML Event Attributes.

❮ Ref Charactersets Att Input Disabled ❯