HTML5 Canvas: Drawing a circle

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

Using the same arc() method, we can draw a circle.

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

Now we need to start the angle with 0, and end it with 2*Math.PI: 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, 60, 0, 2 * Math.PI, false);
    canvas.fillStyle = '#000';
    canvas.strokeStyle = '#000';
    canvas.lineWidth = 2;

Series Navigation<< HTML5 Canvas: Drawing arcs or circles
HTML5 Canvas: Text in canvas using fillText >>

Leave a comment

Leave a Reply