Canvas - Introducing HTML5 - page 122

Keep in mind that when you resize a stretched canvas (as the
example has), the contents of the canvas get stretched, just like
Flash would do if it was resized ( Figure 5.9 ). This is the same
result as Figure 5.8 but I have resized the browser window after
the drawing has completed.

FIGURE 5.9 When a canvas
stretches after it's finished
drawing, so does the contents of
the canvas.

Drawing paths

Within the 2D API is a path API that allows you to move around
the canvas and draw lines or shapes. The contrived example in
Figure 5.10 shows a stick man drawn using the path API.
I won't take you through all the code used to produce the stick
man, just the highlights so you can see what methods I used.
To d r a w t h e s t i c k m a n , y To u m u s t s p e c i f y t h e x , y c To To r d i n a t e s
around the canvas that you want to draw, painstakingly specify-
ing each individual line. To draw the stick man head, run the fol-
lowing code:
ctx.beginPath();
ctx.arc(100, 50, 30, 0, Math.PI*2, true); // head
ctx.fill();
This gives you a solid, fi lled head. I've given the x, y coordinates
of 100, 50, respectively, and a radius of 30 pixels. The next argu-
ments are the start and end points in radians. In this example, I
want a complete circle, so I start at zero and end at Math.PI*2 ,
which is equal to 360 degrees. Finally the sixth argument is the
direction to draw the arc: clockwise or counter-clockwise. In this
case it doesn't matter, but it's still required.
Once the head is drawn, I want to draw a face. The smile
and eyes will be in red. When I draw the facial features, I need
to use beginPath again. Figure 5.11 shows you the result if I

FIGURE 5.10 My contrived
stick man drawing using the
path API.