Drawing a Circle with HTML5 Canvas

Drawing a circle with HTML5 canvas is fairly straight forward. The HTML5 canvas element is a powerful tool for drawing graphics on your website. In this tutorial we will demonstrate how to draw a circle in an HTML5 canvas element.


<canvas id="theCanvas" width="200" height="200"></canvas> 

In the HTML we will define a canvas element with 200 width and 200 height.

The JavaScript

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

context.arc(100, 50, 75, 0, 2 * Math.PI, false);
context.fillStyle = 'red';

Here we use JavaScript to draw the circle into the canvas. In the first two lines, we find the canvas element and get the context in 2d. Once we have the context, we use the arc function to draw the circle.

The Live Demo

You may also like...

3 Responses

  1. good articles thanks for sharing.

  2. Happy Holi 2017 says:

    This was really an interesting topic and I kinda agree with what you have mentioned here!

  3. jackluter says:

    More helpful code and easy to understand.