Drawing on the Canvas - HTML5 Canvas - page 75

Figure 2-4. A basic circle arc

Noticethatwehavetoconvertourstartangle( 0 )andourendangle( 360 )intoradiansbymul-
tiplying 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 clockwise, as
shown in Figure 2-5 :

context . arc ( 100 , 200 , 20 , ( Math . PI / 180 ) * 0 , ( Math . PI / 180 ) * 90 , false 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 true );

Figure 2-6. A three-fourths circle arc

context.arcTo()

Here is context.arcTo() in action:

context . arcTo ( x1 , y1 , x2 , y2 , radius )

The arcTo method has been implemented only 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