HTML5 Canvas: Drawing arcs or circles

Just like any graphics program, we can draw arcs or circles.  This example illustrate how can draw an arcs.

We start with the arc method, which accepts the following values:

canvas.arc(x, y, radius, startAngle, endAngle, antiClockwise(Boolean)); Arcs or circles

<!DOCTYPE html>
<html lang='en'>
    <meta charset='utf-8'>
    <title> Arcs or circles</title>
        canvas {
            border: 1px solid #000;
<canvas id='canvas' width='250' height='250'></canvas>
    var canvas = document.getElementById('canvas').getContext('2d');
    canvas.arc(100, 100, 40, 5, 1, true);
    canvas.strokeStyle = '#000';
    canvas.lineWidth = 5;
If we set the boolean to false, this is what we get: Arcs or circles

Series Navigation<< HTML5 Canvas: Adding gradients to shape
HTML5 Canvas: Drawing a circle >>