In this tutorial we will draw a polygon using the HTML5 canvas and a loop.

We have already seen how to draw a rectangle in this lesson and a circle in this lesson.  We now take things a step further and see how we can draw a polygon by using a loop.

STEP 1

We start by creating a canvas element:

STEP 2

Next, we reference the canvas using the standard javascript getElementById function:

STEP 3

We can now create an array of point for our polygon as follows:

STEP 4

Now all we need to do is loop through the array and draw the polygon using the lineTo function as follows:

Let's break this code down a little:

Line 13: we begin the path...a standard step and hopefully straightforward

Line 14: we move the start of the polygon to the first set of co-ordinates in our array. In this case the polygon will start at point (50, 50)

Lines 15 to 17: we set up a loop to iterate through the remaining points in the array.  The count starts at 2 since we have already used point 0 and point 1 for the starting co-ordinates. We increase the count by 2 each time since we will be using paired co-ordinates.  In Line 16 we use the lineTo function.

So, the first time through the loop we would have:

itemctx.lineTo(polygon[item], polygon[item+1]2ctx.lineTo(100, 50)

Line 18: we close the path (which has the effect of drawing the last side of the triangle

Line 19: we stroke the path

In this example we have drawn a right-angled triangle.

STEP 5

Let's drawn another polygon, this time one with many more sides:

We end up with: