HTML and CSS Reference
In-Depth Information
CHAPTER 1
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
vas>
, 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 im-
ages.
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.
beginPath()
Start a line drawing.
