Skip to Main Content
Painting the Web
book

Painting the Web

by Shelley Powers
May 2008
Beginner content levelBeginner
656 pages
17h 41m
English
O'Reilly Media, Inc.
Content preview from 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) ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

Reinventing the Organization for GenAI and LLMs

Reinventing the Organization for GenAI and LLMs

Ethan Mollick
Mastering PHP 7

Mastering PHP 7

Branko Ajzele

Publisher Resources

ISBN: 9780596515096Supplemental ContentErrata Page