canvas

Jump to: navigation, search

canvas

Needs Summary: This article does not have a summary. Summaries give a brief overview of the topic and are automatically included on some listing pages that link to this article.


Overview Table

DOM Interface ?

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

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

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

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

Needs Examples: This section should include examples.



Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support ? ? ? ? ?

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic support ? ? ? ? ? ? ? ?