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.
A regular polygon, such as a pentagon, can be drawn inside the unit circle as follows:
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:
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:
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:
We can now start to look at pulling this together.
STEP 1
We create a canvas element and reference it as follows:
STEP 2
We now declare some variables:
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:
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):
Lines 19 to 21: we set up a loop to draw each line
Line 20: we stroke the path
We finish with the following:
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:
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:
