The arc function in JavaScript deserves some explanaton:
ctx.arc(x,y,r,a1,a2);As you can see the arc function takes five arguments. The first three are simple to understand: x-value for center, y-value for center, and radius. The last two, however, may present more of a challenge to correctly understand. The a1 value denotes the starting angle for the arc and the a2 value denotes the ending value. These values are in radians. Although 360 degrees is a full rotation, the value for a full rotation in radians is 2*Math.PI.
To draw a circle using arc a1=0 and a2=2*Math.PI. However, to draw a portion of a circle, your values might be something like 1.2*Math.PI and 1.5*Math.PI, depending on where you want your arc to start and end.
Inspect the code for the following simple JavaScript applet:
Your assignment is to recreate the following image in JavaScript:
