How to Draw a Circle Using the HTML Canvas

In this tutorial we will draw a circle using the HTML canvas.

In order to draw a circle we need to know:

  • the centre
  • the radius
  • the starting angle (in radians)
  • the finishing angle (in radians)
  • if we will be rotating clockwise or anti-clockwise

The last 3 criteria would become particularly important if we were drawing an arc (part circle).

HTML canvas - how to draw a circle

STEP 1

The first thing we need to do is create a canvas element on the page:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Drawing a Circle</title>
</head>
<body>
	<canvas id="myCanvas" width="600" height="400">Your browser does not support the HTML5 canvas tag. </canvas>
</body>
</html>

Line 8: we create the canvas with an ID of 'myCanvas' and width of 600 pixels and height of 400 pixels. 

STEP 2

Next, we reference the canvas element and set up a 2D drawing context:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Drawing a Circle</title>
</head>
<body>
	<canvas id="myCanvas" width="600" height="400">Your browser does not support the HTML5 canvas tag. </canvas>
	<script>
		var c = document.getElementById('myCanvas');
		var ctx = c.getContext('2d');
	</script>
</body>
</html>

Line 10: we get the canvas element called 'myCanvas' and assign it to the variable c.

Line 11: we establish a 2D drawing context on the assigned canvas c. 

STEP 3

We now draw the circle:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Drawing a Circle</title>
</head>
<body>
	<canvas id="myCanvas" width="600" height="400">Your browser does not support the HTML5 canvas tag. </canvas>
	<script>
		var c = document.getElementById('myCanvas');
		var ctx = c.getContext('2d');
		ctx.arc(200, 100, 40, 0, 2*Math.PI, false);
		ctx.stroke();
	</script>
</body>
</html>

Line 12: The arc method takes 6 values as follows:

(x position, y position, radius, start angle, end angle, rotation direction)

In our example we have the following:

  • an x-position of 200 pixels
  • a y-position of 100 pixels
  • a radius of 40 pixels
  • a starting angle of 0 radians
  • an ending angle of 2 PI radians
  • a clockwise rotation

So, the centre of our circle is at point (200, 100) with a radius of 40 pixels.

Your browser does not support the HTML5 canvas tag.

Note that angles are given in radians.

The last value specifies the rotation. By default this value is set as false. In other words, if we were to omit this final value then the default would be to draw the arc in a clockwise direction. Simply think of the question 'Do you want to go in an anti-clockwise direction?'.  By setting this to false we will go in a clockwise direction.

Line 13: the circle is stroked.

STEP 4

In order to see the effect of the 6 values above it may be best to draw a quarter circle as follows:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Drawing a Circle</title>
</head>
<body>
	<canvas id="myCanvas" width="600" height="400">Your browser does not support the HTML5 canvas tag. </canvas>
	<script>
		var c = document.getElementById('myCanvas');
		var ctx = c.getContext('2d');
		ctx.arc(200, 100, 40, 0, 0.5*Math.PI, false);
		ctx.stroke();
	</script>
</body>
</html>

In this example we have drawn a quarter circle starting at 0 and going in a clockwise direction. 

Line 12: A full circle is given by 2*Math.PI, hence a quarter circle is given by 0.5*Math.PI, as shown below:

 

Your browser does not support the HTML5 canvas tag.

Want to Learn More?

Become a member and get access to the member only area of this site here.

Comments

Your email address will not be published.

User Avatar

Thanks for the clear tutorial

by John S, 04-Dec-2016

PHP for Beginners

Enrol in the full course here

PHP, MySQL and PDO

Coming soon, a full course on using PHP, MySQL and PDO. Be notified as soon as the course goes live.