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