HTML and CSS Reference

In-Depth Information

n
Note
This discussion is limited to the bare minimum understanding required to use the
arc()
and
arcTo()

methods. Explaining the mathematical treatment involved in drawing these curves is beyond the scope of this topic.

Drawing an Arc Using the arc() Method

To draw an arc on a canvas, you use the drawing context's
arc()
method. The general syntax of
arc()
is as

follows:

context.arc(x, y, radius, start_angle, end_angle, direction)

The first two parameters of the
arc()
method indicate the coordinates of the center of the arc. The

radius
parameter indicates the arc's radius. The start and end angles are the angles in radians for the start

point and end point of the arc, respectively. Finally, the
direction
parameter indicates whether the arc

should be drawn in a clockwise or counterclockwise direction. To better understand these parameters,

look at Figure 4-6.

Figure 4-6.
Pictorial representation of the
arc()
method's parameters

Listing 4-5 shows a code fragment that draws an arc using the
arc()
method.

Listing 4-5.
Using the
arc()
Method

var canvas = $("#MyCanvas").get(0);

var context = canvas.getContext("2d");

var x = canvas.width / 2;

var y = canvas.height / 2;

var radius = 100;

var start_angle = 0.5 * Math.PI;

var end_angle = 1.75 * Math.PI;

context.arc(x, y, 75, start_angle, end_angle, false);

context.lineWidth = 20;

context.stroke();