HTML/Elements/canvas

From W3C Wiki
< HTML‎ | Elements
Revision as of 19:59, 1 December 2011 by Folivier2 (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

<canvas>

A <canvas> element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly.

Point

  • <canvas> element can be used to draw graphics using with API. API has many methods to draw graphs, paths, images, circles and so on.

[Example]

var canvasContext = myCanvas.getContext("2d");
canvasContext.fillRect(100, 100, 100, 100);

The getContext("2d") method can be used as built-in object. Please look at HTML Canvas 2D Context about a detailed specification of this API.

IDL Attributes and Methods

The following IDL attributes and methods are exposed to dynamic scripts.

  DOMString toDataURL(in optional DOMString type, in any... args);

  object getContext(in DOMString contextId);

See also the HTML Canvas 2D Context specification.

HTML Attributes

  • height = non-negative integer
    The height of the canvas, in CSS pixels.
  • width = non-negative integer
    The width of the canvas, in CSS pixels.

See also global attributes.


Examples

A square in a canvas [try it]:

<canvas id="myCanvas" width="300" height="300">
Your user agent does not support the HTML5 Canvas element.
</canvas>
<script>
var myCanvas = document.getElementById("myCanvas");
var canvasContext = myCanvas.getContext("2d");
canvasContext.fillRect(100, 100, 100, 100);
</script>

Canvas01.png

Multiple circles of different colors in a canvas [try it]:

<canvas id="myCanvas" width="600" height="600">
Your user agent does not support the HTML5 Canvas element.
</canvas>
<script>
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");
var w = myCanvas.width, h = myCanvas.height;
var i = 0;
do {
  ctx.fillStyle = "rgb(" + Math.round(255*Math.random()) + ","
                  + Math.round(255*Math.random()) + ","
                  + Math.round(255*Math.random()) + ")";
  ctx.beginPath();
  ctx.arc(w*Math.random(), h*Math.random(),
          50*Math.random(),
          0, Math.PI*2, true);
  ctx.closePath();
  ctx.fill();
} while (++i != 1000);
</script>

Canvas02.png

One can work at the pixel level in a canvas [try it]:

<canvas id="myCanvas" width="600" height="600">
Your user agent does not support the HTML5 Canvas element.
</canvas>
<script>
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");
var output = ctx.createImageData(myCanvas.width, myCanvas.height);
var length= output.data.length;
// output.data is an array of RGBA values
for (var i = 0; i < length; i++) {
  output.data[i] = Math.round(255*Math.random());
}
ctx.putImageData(output, 0, 0);
</script>

Canvas03.png


Accessibility

Authors should ensure that the information and user interface components must be presentable to users in ways they can perceive (WCAG 2.0 - Principle 1: Perceivable).

Work in still in progress proper technical support in HTML5.


HTML reference

This element was introduced in HTML5 - 4.8.10 The canvas element.


See Also