Drawing Arcs

For drawing arcs or circles we use the arc method. The specification also describes the arcTo method, which is supported by Safari and Firefox, but wasn’t implemented in the older Gecko browsers.
arc(x, y, radius, startAngle, endAngle, anticlockwise)
This method takes five parameters: x and y are the coordinates of the circle’s center. Radius is self explanatory. The startAngle and endAngle parameters define the start and end points of the arc in radians. The starting and closing angle are measured from the x axis. The anticlockwise parameter is a Boolean value which when true draws the arc anticlockwise, otherwise in a clockwise direction.
Note: Angles in the arc function are measured in radians, not degrees. To convert degrees to radians you can use the following JavaScript expression: var radians = (Math.PI/180)*degrees.


        <title>Canvas tutorial</title>
            function draw(){
                var ctx = document.getElementById('canvas').getContext('2d');
                for (var i = 0; i < 4; i++) {
                    for (var j = 0; j < 3; j++) {
                        var x = 25 + j * 50; // x coordinate
                        var y = 25 + i * 50; // y coordinate
                        var radius = 20; // Arc radius
                        var startAngle = 0; // Starting point on circle
						// End point on circle
                        var endAngle = Math.PI + (Math.PI * j) / 2; 
						// clockwise or anticlockwise
                        var anticlockwise = i % 2 == 0 ? false : true; 
                        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
                        if (i > 1) {
                        else {
    <body onload="draw();">
        <canvas id="canvas" width="200" height="200">

You may also like...