HTML and CSS Reference
Canvas for Publishers
With the <canvas> element, publishers now have the opportunity to embed a dynamic
sketchpad into HTML5 content. The HTML markup for doing so is quie simple:
< canvas id="my_first_canvas" width="200" height="225">
The content you put here will show up if your rendering engine
doesn't support the <canvas> element.
</ canvas >
The <canvas> element accepts two attributes that specify the dimensions of your draw-
ing area in pixels: width and height . Anything you place within the opening and closing
tags of the element will only be displayed if the rendering engine does not support
<canvas> ; this gives you the option of providing fallback content for backward com-
patibility with non-HTML5 environments (see “HTML5 Canvas, EPUB, and Ereader
compatibility” on page 17 for more on compatibility).
And that's where the HTML starts and ends; it merely sets aside the space within the
HTML document in which to place your graphics. To actually draw on your <can
with an elegant set of functions for creating lines, arcs, shapes, and text. You also have
access to more advanced graphic-manipulation calls to scale, rotate, or crop your im-
Drawing on your <canvas>
Let's draw a smiley face on the canvas we just created above. Here's a list of the Canvas
API functions we'll use:
strokeRect( x 1 , y 1 , x 2 , y 2 )
Draw a rectangular outline from the point ( x 1 , y 1 ) to ( x 2 , y 2 ). Note : by default, the
“origin” of the Canvas (0,0) is its top-left corner, and x - and y -coordinates are
measured to the right and down, respectively.
Start a line drawing.