HTML5 Canvas: Drawing arcs or circles

This entry is part 10 of 17 in the series HTML5 Canvas

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

Leave a comment

Leave a Reply