Polygon
Draw a Polygon by providing the list of x and y co-ordinates of the edges of polygon.
A Polygon is a shape that consists of straight lines joining a set of points.
You can change all the basic properties like stroke and fill.
Input the points in the order in which they are to be drawn.
Syntax
new polygon(points, fill, fill_opacity, stroke, stroke_width, close);
Parameters
points | 2D Array : Array of x and y co-ordinates of the edges of the polygon. ex: [[x1,y1],[x2,y2],[x3,y3]] |
fill | Color : fill color of the polygon |
fill_opacity | Number [0 to 1] or percentage: fill opacity of the polygon |
stroke | Color : stroke color of the polygon |
stroke_width | Number : stroke width of the polygon |
close | Boolean : Whether to close the polygon or not |
Example
new polygon([[50,50],[170,100],[150,150],[100,150]], "#695fe6", 0.3, "#44d", 2, false);
new polygon([[250,50],[330,100],[350,150],[300,150]], "#695fe6", 0.3, "#44d", 2, true);
var t=0;
points=[];
function draw(){
clearCanvas();
points.push([t, HEIGHT/2+100*sin(degToRad(t))]);
new polygon(points, "#695fe6", 0, "#44d", 2, false);
t+=1;
if(t>WIDTH){
points=[];
t=0;
}
requestAnimationFrame(draw);
};