Graphics in a <canvas>
has no appearance of its own but creates a drawing surface within the
The canvas element is standardized by HTML5 but has been around for
longer than that. It was introduced by Apple in Safari 1.3, and it has
been supported by Firefox since version 1.5 and Opera since version 9.
It is also supported in all versions of Chrome. The
<canvas> element is not
supported by IE before IE9, but it can be reasonably well emulated in
IE6, 7, and 8 using the open source ExplorerCanvas project at http://code.google.com/p/explorercanvas/.
An important difference between the
<canvas> element and SVG is that with
the canvas you create drawings by calling methods and with SVG you
create drawings by building a tree of XML elements. These two
approaches are equivalently powerful: either one can be simulated with
the other. On the surface, they are quite different, however, and each
has its strengths and weaknesses. An SVG drawing, for example, is
easily edited by removing elements from its description. To remove an
element from the same graphic in a
<canvas>, it is often necessary to
erase the drawing and redraw it from scratch. Since the Canvas drawing
grammar), it is documented completely in this book. See Canvas, CanvasRenderingContext2D, and related entries in the
client-side reference section.
Most of the Canvas drawing ...