How to draw polygons on an HTML5 canvas

Question

I need to know how to draw polygons on a canvas  Without using jQuery or anything like that

User · Answer

For the people looking for regular 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);
}

Use:

//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();

User · Answer

Create a path with 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

User · Answer

create and fill polygon CanvasRenderingContext2D prototype fillPolygon   function  pointsArray  fillColor      strokeColor        if  pointsArray length  lt   0  return      this moveTo pointsArray 0  0   pointsArray 0  1        for  var i   0  i  lt  pointsArray length  i              this lineTo pointsArray i  0   pointsArray i  1              if  strokeColor    null  amp  amp  strokeColor    undefined          this strokeStyle   strokeColor       if  fillColor    null  amp  amp  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

User · Answer

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  lt  poly length-1   item  2   ctx lineTo  poly item    poly item 1      ctx closePath    ctx fill

User · Answer

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    x000D   x000D  var ctx   document getElementById  hexagon   getContext  2d    x000D   x000D     hexagon x000D  var numberOfSides   6  x000D      size   20  x000D      Xcenter   25  x000D      Ycenter   25  x000D   x000D  ctx beginPath    x000D  ctx moveTo  Xcenter    size   Math cos 0   Ycenter    size    Math sin 0              x000D   x000D  for  var i   1  i  lt   numberOfSides i    1    x000D    ctx lineTo  Xcenter   size   Math cos i   2   Math PI   numberOfSides   Ycenter   size   Math sin i   2   Math PI   numberOfSides    x000D    x000D   x000D  ctx strokeStyle     000000   x000D  ctx lineWidth   1  x000D  ctx stroke    x000D   hexagon   border  thin dashed red    x000D   lt canvas id  hexagon  gt  lt  canvas gt  x000D   x000D   x000D

User · Answer

Here is a function that even supports clockwise anticlockwise drawing do that you control fills with the non-zero winding rule   Here is a full article on how it 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  lt  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  lt  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

User · Answer

You can use the lineTo   method same as   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 not want to fill the polygon use the stroke   method in the place of fill    You can also check the following  http   www authorcode com draw-and-fill-a-polygon-and-triangle-in-html5   thanks

User · Answer

In addition to  canvastag  use a while loop with shift I think is more concise   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

User · Answer

To make a simple hexagon without the need for a loop  Just use the beginPath   function  Make sure your canvas getContext  2d   is the equal to ctx if not it will not work   I also like to add a variable called times that I can use to scale the object if I need to This what I don t need to change each 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

[javascript] How to draw polygons on an HTML5 canvas?

Examples related to javascript

Examples related to css

Examples related to html

Examples related to canvas