Name

canvas — HTML5

Synopsis

<canvas> . . . </canvas>

Represents a two-dimensional area that can be used for rendering dynamic bitmap graphics, such as graphs or games. The image on the canvas is generated with scripts.

Notes

HTML5 only.

The canvas element is one of the better supported HTML5 features, with basic support in Firefox 2.0+, Safari 3.1+, Chrome 1.0+, and Opera 9.0. Support is promised in Internet Explorer 9, but in the meantime, many developers use the ExplorerCanvas workaround (excanvas.sourceforge.net). A task force has been assembled to address the accessibility issues related to canvas to improve usability for the visually impaired.

Start/End Tags

Required/Required

Attributes

HTML5 Global Attributes

height="number"

Specifies the height of the canvas area in CSS pixels.

width="number"

Specifies the width of the canvas area in CSS pixels.

Example

<html>
<head>
   <script type="application/x-javascript">
function draw() {
  var canvas = document.getElementById("box");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "rgb(163, 120, 240)";
  ctx.fillRect (55, 50, 75, 100);
}
   </script>
</head>
<body onload="draw()">
   <canvas id="box" width="250" height="250"></canvas>
</body>
</html>

Get HTML & XHTML Pocket Reference, 4th Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial