Drawing on the Canvas - HTML5 Canvas - page 35

Figure 2-4. A basic circle arc
Notice that we have to convert our start angle ( 0 ) and our end angle ( 360 ) into radians
by multiplying them by ( Math.PI/180 ). By using 0 as the start angle and 360 as the end,
we create a full circle.
We can also draw a segment of a circle by not specifying the entire 0 to 360 start and
stop angles. This code for drawScreen() will create one-quarter of a circle drawn clock-
wise, as shown in Figure 2-5 :
context.arc(100, 200, 20, (Math.PI/180)*0, (Math.PI/180)*90, false);
Figure 2-5. A one-quarter circle arc
If we want to draw everything but the 0-90 angle, as shown in Figure 2-6 , we can employ
the anticlockwise argument and set it to true :
context.arc(100, 200, 20, (Math.PI/180)*0, (Math.PI/180)*90, true);
Figure 2-6. A three-fourths circle arc
context. arcTo ()
context.arcTo(x1, y1, x2, y2, radius)
The arcTo method has only been implemented in the latest browsers—perhaps because
its capabilities can be replicated by the arc() function. It takes in a point ( x1 , y1 ) and
draws a straight line from the current path position to this new position. Then it draws
an arc from that point to the y1 , y2 point using the given radius.
The context.arcTo method will work only if the current path has at least one subpath.
So, let's start with a line from position 0,0 to position 100,200. Then we will build our
small arc. It will look a little like a bent wire coat hanger (for lack of a better description),
as shown in Figure 2-7 :
context.moveTo(0,0);
context.lineTo(100, 200);
context.arcTo(350,350,100,100,20);