Implement and manipulate document structures and objects - Programming in HTML5 with JavaScript and CSS3 - page 44

TABLE 1-8 Parameters required to draw an arc

Parameter Description

X , Y The first two parameters are the X and Y coordinates for the center of the circle.

The third parameter is the radius. This is the length of the distance from the
center point of the circle to the curve.

radius

startAngle , endAngle

The fourth and fifth parameters specify the starting and ending angles of the
arc to be drawn. This is measured in radians, not in degrees.

The final parameter specifies the drawing direction of the arc. counterclockwise

Add the following code to your page:

ctxt.beginPath();
ctxt.arc(150,100,75,0,2 * Math.PI, false);
ctxt.lineWidth = 25;
ctxt.strokeStyle = '#0f0';
ctxt.stroke();

ctxt.beginPath();
ctxt.arc(450, 100, 75, 1.5 * Math.PI, 2 * Math.PI, false);
ctxt.lineWidth = 25;
ctxt.strokeStyle = 'blue';
ctxt.stroke();

ctxt.beginPath();
ctxt.arc(150, 300, 75, 1 * Math.PI, 1.5 * Math.PI, false);
ctxt.lineWidth = 25;
ctxt.strokeStyle = '#0ff';
ctxt.stroke();

ctxt.beginPath();
ctxt.arc(450, 300, 75, .5 * Math.PI, 1 * Math.PI, false);
ctxt.lineWidth = 25;
ctxt.strokeStyle = '#f00';
ctxt.stroke();

This code sample draws four arcs: a full circle followed by three quarter circles, each with
a different style. Notice that some math formulas are specified in the parameters to the arc.
This math is necessary to get the value in radians because the parameters for startAngle and
endAngle are specified in radians, not in degrees. The code produces the drawing shown in
Figure 1-30.