How to draw polygons on an HTML5 canvas?

First we need to identify the points on HTML-5 canvas & then use ‘context.lineto()’ method for drawing required lines & finally use stroke or fill method to make your polygon visible. Below is the sample code for Drawing Canvas Polygon in HTML5:

Polygon circle in HTML5

HTML5 canvas API comes with so many options and we can draw anything using JavaScript based upon path abstractions

var c2 = canvas.getContext('2d');

c2.fillStyle = '#f00';

c2.beginPath();

c2.moveTo(0, 0);

c2.lineTo(100,50);

c2.lineTo(50, 100);

c2.lineTo(0, 90);

c2.closePath();

c2.fill();

But the problem is how can we identify the points to draw polygon? In this article I will explain how to draw a regular polygon in HTML5 Canvas. And, also methods to identify the points to draw regular polygon.

What exactly this regular polygon is? As we know, in a regular polygon all angles and all sides are equal.

Observe the code below carefully. Then, I will explain each line one by one:

function regularpolygon(ctx, x, y, radius, sides) {

  if (sides < 3) return;

  ctx.beginPath();

  var a = ((Math.PI * 2)/sides);

  ctx.translate(x,y);

  ctx.moveTo(radius,0);

  for (var i = 1; i < sides; i++) {

    ctx.lineTo(radius*Math.cos(a*i),radius*Math.sin(a*i));

  }

  ctx.closePath();

}

Polygon drawn with HTML5

We are passing ‘context(ctx),center of regular polygon(x,y), with radius(r), & number of sides(sides)’ as parameter for regular polygon function. If sides < 3 we cannot make a polygon so return directly.

Further, calculation of next angle, HTML5 canvas &  JavaScript trig. functions will take radian as the unit to specify angles of polygon rather than degrees. And 2*,Math.PI is equal to 360 degrees.

Now moving the center of polygon to points (x,y) using translate method.

Now we will get back to the first point of regular polygon using moveTo() method that is (r,0) as explained above.

Loop through the sides of polygon to find remaining two points & then close the path using closePath() .

Draw Triangle using HTML5 Canvas:

Note that, this function will not draw anything, in fact it will only define drawing path and we need to use stroke or fill method to make our polygon visible. Here is the sample HTML5 Code:

The code above will draw the triangle (with radius (3,0) But that is not visually straight because we made the first point as (3,0).

To draw triangle straight we need to rotate the context around 90 degrees (negative direction i.e., -Math.PI/2) so I will slightly change my method as shown below:

function polygon(ctx, x, y, radius, sides, rotateAngle) {

  if (sides < 3) return;

  var a = (Math.PI * 2)/sides;

  ctx.beginPath();

  ctx.translate(x,y);

  ctx.rotate(rotateAngle);

  ctx.moveTo(radius,0);

  for (var i = 1; i < sides; i++) {

  ctx.lineTo(radius*Math.cos(a*i),radius*Math.sin(a*i));

  }

  ctx.closePath();

}

And now below code will draw exactly straight triangle:

polygon(context, 120,120,100,3,-Math.PI/2);

context.stroke()

If you do not want to rotate your triangle do not pass the last argument i.e., rotateAngle.

I hope now you understand  how to draw a regular polygon using HTML5 canvas.

But how we can generalize these to any polygon simply follow the steps given below. For instance take an irregular pentagon:

  • Identify any five points on a circle.
  • To identify the points we need to divide angle of 360 degrees into 5 parts which are not equal(Say 80,90,100,30,60 degrees)
  • These angles are made by the each side at center of circle.
  • Now we know the points to draw the lines using LineTo & finally stroke it. Please look into the code below.

Draw Polygon using HTML5 Canvas:

As we know, all angles of regular polygon are equal so we took a loop to find the points but for normal polygon this is not the case, so we need to add angles sequence wise to identify the points:

var c = canvas.getContext("2d");

c.beginPath();    

c.translate(120,120);

c.moveTo(100,0);

c.lineTo(100*Math.cos((Math.PI/180)*80),100*Math.sin((Math.PI/180)*80));

c.lineTo(100*Math.cos((Math.PI/180)*(80+90)),100*Math.sin((Math.PI/180)*(80+90)));

c.lineTo(100*Math.cos((Math.PI/180)*(80+90+100)),100*Math.sin((Math.PI/180)*(80+90+100)));

c.lineTo(100*Math.cos((Math.PI/180)*(80+90+100+30)),100*Math.sin((Math.PI/180)*(80+90+100+30)));

c.closePath();

c.stroke();

Example

Example of user-interactive polygon: