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


Compatibility

There is no data available for topic "HTML", feature "canvas". If you think that there should be data available, consider opening an issue.

Needs Examples: This section should include examples.