Canvas - Introducing HTML5 - page 150

FIguRE 5.9 When a canvas
stretches after it's finished
drawing, so do 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
draw the stick man, you must specify the x, y coordinates around
the canvas that you want to draw, painstakingly specifying each
individual line. To draw the stick man head, run the following code:
ctx.beginPath();
ctx.arc(100, 50, 30, 0, Math.PI*2, true); // head
ctx.fill();

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

Getting from degrees to radians

The arc, bezier, and quadratic methods use radians, so if you're used
to working with degrees, you'll need to convert them to radians. Here's
the JavaScript you need to go from degrees to radians:
var radians = degrees * Math.PI / 180;

It's also common to pass 360 degrees to the drawing methods, which
is simply Math.PI * 2 , and equally 180 degrees is Math.PI .

This gives you a solid, filled 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 endpoints 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 in radians. Finally the sixth argument is the
direction to draw the arc: clockwise or counterclockwise. In this
case it doesn't matter, but it's still required.