Draw Arc on HTML5 canvas

To draw arcs and circles, we use the arc method like as:

arc(x, y, radius, startAngle, endAngle, anticlockwise)
Where x and y are the coordinates of the circle’s center. Radius is self explanatory. The startAngle and endAngle parameters for the start and end points of the arc in radians from the x axis. The anticlockwise parameter is a Boolean value which when true draws the arc anticlockwise, otherwise in a clockwise direction. See the figure 1.

Draw a arc on HTML5 canvas

Example

The following example will draw six arc shape, three arc use the stroke outlined style and a rest of all use fill style. With the example you will get the clear idea about the start and end angle.
 

 function draw() {
                var ctx;
                var canvas = document.getElementById("MyCanvas");
                if (canvas.getContext) {
                    ctx = canvas.getContext("2d");
                    ctx.arc(20, 100, 40, 0, Math.PI * 3 / 2, true);
                    ctx.stroke();
 
                    ctx.beginPath();
                    ctx.arc(120, 100, 40, 0, Math.PI, true);
                    ctx.stroke();
 
                    ctx.beginPath();
                    ctx.arc(220, 100, 40, 0, Math.PI / 2, true);
                    ctx.stroke();
 
                    ctx.beginPath();
                    ctx.arc(320, 100, 40, 0, Math.PI * 2, true);
                    ctx.stroke();
 
                    ctx.fillStyle = "black";
                    ctx.beginPath();
                    ctx.arc(20, 200, 40, 0, Math.PI * 3 / 2, true);
                    ctx.fill();
 
                    ctx.beginPath();
                    ctx.arc(120, 200, 40, 0, Math.PI, true);
                    ctx.fill();
 
                    ctx.beginPath();
                    ctx.arc(220, 200, 40, 0, Math.PI / 2, true);
                    ctx.fill();
 
                    ctx.beginPath();
                    ctx.arc(320, 200, 40, 0, Math.PI * 2, true);
                    ctx.fill();
                } 
            }

From the above all arc methods use the anticlockwise direction. This parameter is not required in the Safari browser.
 
Draw arc on canvas html5

Figure 1