124 Chapter 5—Canvas
The second option for creating arcs—the method arc()—seems even more com-
plicated at first glance. In addition to center and radius, we now have to specify
two angles and the direction of rotation:context.arc(x, y, radius, startAngle, endAngle, anticlockwise)The center point of the arc in Figure 5.12 is the center of a circle with a given ra-
dius. Originating from this point, the angles startAngle and endAngle create two
handles, intersecting the circle in two points. The direction of the arc between
these two coordinates is determined by the parameter anticlockwise, where 0
means clockwise and 1 counterclockwise.Figure 5.12 The path method “arc()”The resulting arc begins in the center of the circle at the point x0/y0, joins this
point in a straight line to the first intersection point spx/spy, and from there draws
an arc to the end point epx/epy, which now becomes the new current point.
The biggest drawback in creating arcs is that all angles must be specified in radi-
ans instead of degrees. So here’s a quick helper to refresh your memory on how
to convert: