Drawing on the Canvas - HTML5 Canvas - page 74

Arcs

There are four functions we can use to draw arcs and curves onto the canvas. An arc can be a
complete circle or any part of a circle.

context.arc()

Here is context.arc() in action:

context . arc ( x , y , radius , startAngle , endAngle , anticlockwise )

The x and y values define the center of our circle, and the radius will be the radius of the
circle upon which our arc will be drawn. startAngle and endAngle are in radians, not de-
grees. anticlockwise is a true or false value that defines the direction of the arc.
For example, if we want to draw a circle with a center point at position 100,100 and with
a radius of 20, as shown in Figure 2-4 , we could use the following code for the contents of
drawScreen() :

context . arc ( 100 , 100 , 20 , ( Math . PI / 180 ) * 0 , ( Math . PI / 180 ) * 360 , false false );

Example 2-4 illustrates the code necessary to create a simple circle.

Example 2-4. A circle arc
function

function drawScreen () {

context . beginPath ();
context . strokeStyle = "black" ;
context . lineWidth = 5 ;
context . arc ( 100 , 100 , 20 , ( Math . PI / 180 ) * 0 , ( Math . PI / 180 ) * 360 , false false );

//full circle
context . stroke ();
context . closePath ();

}