HTML and CSS Reference
In-Depth Information
This code calculates the center of the canvas and uses those coordinates as the x and y coordinates of
the arc. Notice how the start and end angles are calculated in radians using the Math.PI constant. The
direction parameter is set to false , indicating that the arc should be drawn in the clockwise direction.
Figure 4-7 shows how the code from Listing 4-5 renders in the browser.
Figure 4-7. The arc() method in action
There is also a different way to draw an arc: using the arcTo() method. This method takes the
following form:
context.arcTo(x1, y1, x2, y2, radius)
In this method signature, x1 , y1 , x2 , and y2 are the control points, and radius is the radius of the arc.
Determining the control points is bit complex; Figure 4-8 illustrates.
Figure 4-8. Coordinates used in the arcTo() method
Search WWH ::

Custom Search