Painting the Web

canvas Basics

The canvas specification is currently being developed by a merging of the WHATWG group and the W3C. The specification can be found at http://www.whatwg.org/specs/web-apps/current-work/multipage/section-the-canvas.html . The documentation for the object is fuzzy, to put it delicately. There is documentation, but not necessarily anything as explicit, or precise, as that given for SVG.

The canvas object is an HTML element, added to a page just like you'd add a div or an img. When adding a canvas element, make sure to give it an identifier, a width, and a height, though this could cause XHTML or HTML validation warnings and errors:

<canvas id="workObj" width="400" height="400">
</canvas>

You're not going to want to use CSS style settings, as the two aren't compatible, at least from my own explorations.

For those environments that don't support the canvas element, or more importantly, have scripting turned off, add content within the element that will then be displayed that either reflects the canvas content or perhaps replaces it with an image:

<canvas id="workObj" width="400" height="400">
<img src="some.jpg" alt="Replacement image for canvas" />
</canvas>

Once you've added a canvas element, you can access it in script and begin to draw.

Beginning to Draw

The only non-script portion of the canvas element is adding the element to the page. The rest of the work with the object happens in script.

To start, you have to access the canvas element through the Document Object Model (DOM) ...