The arc() function

Summary: The canvas arc() function is a path function used when drawing circles or partial circles

The arc() function is used whilst drawing paths to the canvas to draw a circle or a partial circle to the canvas.

Arguments to the function

• The X coordinate (of the center point)
• The Y coordinate (of the center point)
• The radius of the arc/circle
• The angle to start drawing ¹
• The angle to stop drawing at ¹
• A boolean indicating the direction to draw. True is anti-clockwise, false is clockwise

¹ Angles are measured in radians - not degrees. 1 radian is equal to (180 / Math.PI) degrees.

An example

<script>
    window.onload = function ()
    {
        var canvas  = document.getElementById('cvs');
        var context = canvas.getContext)'2d');

        context.beginPath();
    
        // This draws a whole circle to the canvas
        context.arc(125, 125, 100, 0, Math.PI * 2, false);
    
        context.stroke();
    }
</script>