How to Draw Regular Polygons Using the HTML Canvas

In this lesson we will learn how to draw regular polygons using the HTML canvas. You will need a basic understanding of trigonometry and the unit circle in order to fully understand how the code works.

A regular polygon is one with all sides of equal length and all internal angles of equal size.

First of all, let's consider the unit circle.  This is a circle centred at (0, 0) with radius of 1 unit.

The Unit Circle

A regular polygon, such as a pentagon, can be drawn inside the unit circle as follows:

Unit Circle with a Regular Pentagon inside

In order to draw the pentagon we need to be able to identify the 5 points on the unit circle and rotate and draw lines between them.

This is where some understanding of trigonometry comes in useful.

Let's consider some point, (a, b) on the unit circle as follows:

The Unit Circle with an arbitrary point

We know the radius (r), in this case it is 1 because it is the unit circle. However, it could be any length we choose.

The point (a, b) can be written in terms of trigonometric ratios as follows:

The x-ordinate is given by a = r cos 𝛳

The y-ordinate is given by b = r sin 𝛳

In Javascript we can identify the first point as:

(x + radius * Math.cos(angle), y + radius * Math.sin(angle))

Note that we add the (x, y) ordinate values since we will not necessarily be centering the circle at (0, 0).

Since we are drawing a pentagon we know that the angle we will need to rotate through will be 360o / 5.  However, all angles must be given in radians.  So the angle will be 2*Pi / 5.  In Javascript this is written as:

var angle = 2*Math.PI/numberOfSides;

We can now start to look at pulling this together.

STEP 1

We create a canvas element and reference it as follows:

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

STEP 2

We now declare some variables:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Drawing a Polygon</title>
</head>
<body>
	<canvas id="myCanvas" width="600" height="400">Your browser does not support the HTML5 canvas tag. </canvas>
	<script>
		var canvas = document.getElementById('myCanvas')
		var ctx = canvas.getContext('2d');
		var numberOfSides = 5;
		var radius = 100;
   	    var x = 125;
    	var y = 125;
		var angle = 2*Math.PI/numberOfSides;
	</script>
</body>
</html>

Line 12: since we are drawing a pentagon we set the number of sides to 5

Line 13: we define a radius for our circle. The pentagon will be drawn inside the circle, each vertex of the pentagon will be on the circumference of the circle.

Line 14: we set the x-ordinate of the centre of the circle

Line 15: we set the y-ordinate of the centre of the circle

Line 16: we calculate the size of the external angle of the pentagon. This is the angle we will need to rotate through after each line is drawn.

STEP 3

We can now set up a loop to draw each line of the polygon:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Drawing a Polygon</title>
</head>
<body>
	<canvas id="myCanvas" width="600" height="400">Your browser does not support the HTML5 canvas tag. </canvas>
	<script>
		var canvas = document.getElementById('myCanvas')
		var ctx = canvas.getContext('2d');
		var numberOfSides = 5;
		var radius=100;
		var x = 125;
		var y = 125;
		var angle = 2*Math.PI/numberOfSides;
 		ctx.beginPath();
		ctx.moveTo (x +  radius*Math.cos(0), y +  radius*Math.sin(0));          
 		for (var i = 1; i <= numberOfSides; i++) {
			 ctx.lineTo (x + radius*Math.cos(i * angle), y + radius*Math.sin(i * angle));
		}
 		ctx.stroke();
	</script>
</body>
</html>

Line 17: we begin the path

Line 18: we move to the first point which is directly across from the centre of the circle (indicated in red below):

Drawing a pentagon on a unit circle

Lines 19 to 21: we set up a loop to draw each line

Line 20: we stroke the path

We finish with the following:

 

Your browser does not support the HTML5 canvas tag.

STEP 4

Those of you who are still feeling comfortable with the code at this point may realise that we can simplify things a little bit.

We have been referencing the centre as (x, y) and then using this within all calculations.

By using the Javascript translate function we can simplify our calculation a little as follows:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Drawing a Polygon</title>
</head>
<body>
	<canvas id="myCanvas" width="600" height="400">Your browser does not support the HTML5 canvas tag. </canvas>
	<script>
		var canvas = document.getElementById('myCanvas')
		var ctx = canvas.getContext('2d');
		var numberOfSides = 5;
		var radius=100;
		var x = 125;
		var y = 125;
		var angle = 2*Math.PI/numberOfSides;
 		ctx.beginPath();
		ctx.translate(x, y);
		ctx.moveTo (radius*Math.cos(0), radius*Math.sin(0));          
 		for (var i = 1; i <= numberOfSides; i++) {
			 ctx.lineTo (radius*Math.cos(i * angle), radius*Math.sin(i * angle));
		}
 		ctx.stroke();
	</script>
</body>
</html>

STEP 5

We can also simplify line 19 by using some trig facts i.e. that cos 0 = 1 and that sin 0 = 0.

This gives us:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Drawing a Polygon</title>
</head>
<body>
	<canvas id="myCanvas" width="600" height="400">Your browser does not support the HTML5 canvas tag. </canvas>
	<script>
		var canvas = document.getElementById('myCanvas')
		var ctx = canvas.getContext('2d');
		var numberOfSides = 5;
		var radius=100;
		var x = 125;
		var y = 125;
		var angle = 2*Math.PI/numberOfSides;
 		ctx.beginPath();
		ctx.translate(x, y);
		ctx.moveTo(radius, 0);          
 		for (var i=1; i<=numberOfSides; i++) {
			 ctx.lineTo(radius*Math.cos(i * angle), radius*Math.sin(i * angle));
		}
 		ctx.stroke();
	</script>
</body>
</html>

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.

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.