HTML5 for Publishers

Chapter 1. Canvas for Publishers

With the <canvas> element, publishers now have the opportunity to embed a dynamic sketchpad into HTML5 content. The What is HTML5 for doing so is quite 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 drawing 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 compatibility with non-HTML5 environments (see HTML5 Canvas, EPUB, and Ereader compatibility 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 <canvas>, you’ll use JavaScript code to interact with the Canvas API, which provides you 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 images.

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(x1, y1, x2, y2)

Draw a rectangular outline from the point (x₁, y₁) to (x₂, y₂). Note: by default, the “origin” of the ...