HTML and CSS Reference

In-Depth Information

Figure 2-4. A basic circle arc

Notice that we have to convert our start angle (
0
) and our end angle (
360
) into radians

by multiplying them by (
Math.PI/180
). By using
0
as the start angle and
360
as the end,

we create a full circle.

We can also draw a segment of a circle by not specifying the entire 0 to 360 start and

stop angles. This code for
drawScreen()
will create one-quarter of a circle drawn clock-

wise, as shown in
Figure 2-5
:

context.arc(100, 200, 20, (Math.PI/180)*0, (Math.PI/180)*90, false);

Figure 2-5. A one-quarter circle arc

If we want to draw everything
but
the 0-90 angle, as shown in
Figure 2-6
, we can employ

the
anticlockwise
argument and set it to
true
:

context.arc(100, 200, 20, (Math.PI/180)*0, (Math.PI/180)*90, true);

Figure 2-6. A three-fourths circle arc

context.
arcTo
()

context.arcTo(x1, y1, x2, y2, radius)

The
arcTo
method has only been implemented in the latest browsersâ€”perhaps because

its capabilities can be replicated by the
arc()
function. It takes in a point (
x1
,
y1
) and

draws a straight line from the current path position to this new position. Then it draws

an arc from that point to the
y1
,
y2
point using the given radius.

The
context.arcTo
method will work only if the current path has at least one subpath.

So, let's start with a line from position 0,0 to position 100,200. Then we will build our

small arc. It will look a little like a bent wire coat hanger (for lack of a better description),

as shown in
Figure 2-7
:

context.moveTo(0,0);

context.lineTo(100, 200);

context.arcTo(350,350,100,100,20);