Easy jQquery Plugins

Submit plugin Contact ☰

Arc

An arc is a part of the circumference of a circle. Below example shows how an arc can be drawn in a canvas


    <!DOCTYPE HTML>
    <html>
    <head>
    <style>
        body {
        margin: 0px;
        padding: 0px;
        }
        #myCanvas {
            border:1px solid #000;
        }
    </style>
    </head>
    <body>
    <canvas id="myCanvas" width="400" height="350"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var radius = 50;
        var startAngle = 0 * Math.PI;
        var endAngle = 0.5 * Math.PI;
        var anticlockwise = false;

        //arc 1
        context.beginPath();
        context.arc(150, 50, radius, startAngle, endAngle, anticlockwise);
        context.lineWidth = 10;
        context.strokeStyle = '#34495e';
        context.stroke();

        //arc 2
        anticlockwise = true;
        context.beginPath();
        context.arc(150, 250, radius, startAngle, endAngle, anticlockwise);
        context.lineWidth = 10;
        context.strokeStyle = '#d0000f';
        context.stroke();

    </script>
    </body>
    </html>

The above code will produce the following result

Explanation

Arc is basically nothing but just a part of the circumfrence of the circle. To draw an arc in the canvas arc() method is used. The first 2 parameters of arc() method are the x and y cordinates of the circle, third parameter is the radius of the circle, fourth and fifth parameter are the start angle and end angle for the arc and the last parameter is direction of the arc to draw in anticlockwise or clockwise direction.

Contact Submit plugin