How to draw polygons on HTML5 canvas?

Question

I need to know how to draw polygons on canvas. Without using jQuery or something like that.

Answer 1

Create a path using moveTo and lineTo ( live demo ):

 var ctx = canvas.getContext('2d'); ctx.fillStyle = '#f00'; ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(100,50); ctx.lineTo(50, 100); ctx.lineTo(0, 90); ctx.closePath(); ctx.fill(); 

Answer 2

 //poly [x,y, x,y, x,y.....]; var poly=[ 5,5, 100,50, 50,100, 10,90 ]; var canvas=document.getElementById("canvas") var ctx = canvas.getContext('2d'); ctx.fillStyle = '#f00'; ctx.beginPath(); ctx.moveTo(poly[0], poly[1]); for( item=2 ; item < poly.length-1 ; item+=2 ){ctx.lineTo( poly[item] , poly[item+1] )} ctx.closePath(); ctx.fill(); 

Answer 3

from http://www.scienceprimer.com/drawing-regular-polygons-javascript-canvas :

The following code will draw a hexagon. Change the number of sides to create different regular polygons.

 var ctx = document.getElementById('hexagon').getContext('2d'); // hexagon var numberOfSides = 6, size = 20, Xcenter = 25, Ycenter = 25; ctx.beginPath(); ctx.moveTo (Xcenter + size * Math.cos(0), Ycenter + size * Math.sin(0)); for (var i = 1; i <= numberOfSides;i += 1) { ctx.lineTo (Xcenter + size * Math.cos(i * 2 * Math.PI / numberOfSides), Ycenter + size * Math.sin(i * 2 * Math.PI / numberOfSides)); } ctx.strokeStyle = "#000000"; ctx.lineWidth = 1; ctx.stroke(); 

 #hexagon { border: thin dashed red; } 

 <canvas id="hexagon"></canvas> 

Answer 4

 //create and fill polygon CanvasRenderingContext2D.prototype.fillPolygon = function (pointsArray, fillColor, strokeColor) { if (pointsArray.length <= 0) return; this.moveTo(pointsArray[0][0], pointsArray[0][1]); for (var i = 0; i < pointsArray.length; i++) { this.lineTo(pointsArray[i][0], pointsArray[i][1]); } if (strokeColor != null && strokeColor != undefined) this.strokeStyle = strokeColor; if (fillColor != null && fillColor != undefined) { this.fillStyle = fillColor; this.fill(); } } //And you can use this method as var polygonPoints = [[10,100],[20,75],[50,100],[100,100],[10,100]]; context.fillPolygon(polygonPoints, '#F00','#000'); 

Answer 5

Here is a function that even maintains a clockwise / counterclockwise pattern, controls the gulf using a non-zero winding rule.

Here is a complete article on how this works and more.

 // Defines a path for any regular polygon with the specified number of sides and radius, // centered on the provide x and y coordinates. // optional parameters: startAngle and anticlockwise function polygon(ctx, x, y, radius, sides, startAngle, anticlockwise) { if (sides < 3) return; var a = (Math.PI * 2)/sides; a = anticlockwise?-a:a; ctx.save(); ctx.translate(x,y); ctx.rotate(startAngle); 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(); ctx.restore(); } // Example using the function. // Define a path in the shape of a pentagon and then fill and stroke it. context.beginPath(); polygon(context,125,125,100,5,-Math.PI/2); context.fillStyle="rgba(227,11,93,0.75)"; context.fill(); context.stroke(); 

Answer 6

You can use the lineTo () method just like: var objctx = canvas.getContext ('2d');

  objctx.beginPath(); objctx.moveTo(75, 50); objctx.lineTo(175, 50); objctx.lineTo(200, 75); objctx.lineTo(175, 100); objctx.lineTo(75, 100); objctx.lineTo(50, 75); objctx.closePath(); objctx.fillStyle = "rgb(200,0,0)"; objctx.fill(); 

If you do not want to fill the polygon, use the stroke () method instead of fill ()

You can also check the following: http://www.authorcode.com/draw-and-fill-a-polygon-and-triangle-in-html5/

thank

Answer 7

In addition to @canvastag use a while with shift , I think a shorter one:

 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var poly = [5, 5, 100, 50, 50, 100, 10, 90]; // copy array var shape = poly.slice(0); ctx.fillStyle = '#f00' ctx.beginPath(); ctx.moveTo(shape.shift(), shape.shift()); while(shape.length) { ctx.lineTo(shape.shift(), shape.shift()); } ctx.closePath(); ctx.fill(); 

Answer 8

To make a simple hexagon without a loop, simply use the beginPath () function. Make sure your canvas.getContext ('2d') is ctx if it doesn't work.

I also like to add a variable called times, which I can use to scale the object if I need to. This is what I do not need to change every number.

  // Times Variable var times = 1; // Create a shape ctx.beginPath(); ctx.moveTo(99*times, 0*times); ctx.lineTo(99*times, 0*times); ctx.lineTo(198*times, 50*times); ctx.lineTo(198*times, 148*times); ctx.lineTo(99*times, 198*times); ctx.lineTo(99*times, 198*times); ctx.lineTo(1*times, 148*times); ctx.lineTo(1*times,57*times); ctx.closePath(); ctx.clip(); ctx.stroke(); 

Answer 9

For people who are looking for the correct polygons:

 function regPolyPath(r,p,ctx){ //Radius, #points, context //Azurethi was here! ctx.moveTo(r,0); for(i=0; i<p+1; i++){ ctx.rotate(2*Math.PI/p); ctx.lineTo(r,0); } ctx.rotate(-2*Math.PI/p); } 

Using:

 //Get canvas Context var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.translate(60,60); //Moves the origin to what is currently 60,60 //ctx.rotate(Rotation); //Use this if you want the whole polygon rotated regPolyPath(40,6,ctx); //Hexagon with radius 40 //ctx.rotate(-Rotation); //remember to 'un-rotate' (or save and restore) ctx.stroke();