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.
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.