Drawing with the Canvas - HTML5 Programming for ASP.NET Developers - page 88

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();