2.9. Arcs and Circles

The Canvas context provides two methods for drawing arcs and circles: arc() and arcTo(). In this section we look at both of those methods.

2.9.1. The arc() Method

The arc() method takes six parameters: arc(x, y, radius, startAngle, endAngle, counterClockwise). The first two parameters represent a point at the center of a circle; the third argument represents the radius of the circle; and the fourth and fifth arguments represent the starting angle and end angle, respectively, of the arc that the browser draws around the circumference of the circle. The last argument to arc() is optional and represents the direction in which the browser draws the arc. If that value is false, which is the default, the browser draws the arc clockwise; if the value is true, the browser draws the arc counterclockwise. The arc() method is illustrated in Figure 2.32.