Easy Polygon Generator Based On JavaScript And Canvas – PolyGEN

Preview:

Description:

PolyGEN is a really simple JavaScript library that lets you draws highly customizable polygons on an HTML5 canvas element.

How to use it:

Insert the minified version of the PolyGEN into the html page.

<script src="bin/polygen.min.js"></script>

Create an HTML canvas element:

<canvas width="1024" height="1024"></canvas>

The sample JavaScript to draw a custom polygon on the canvas element.

//Declare canvas element
PolyGen.canvas = document.querySelector('canvas');
//Declare canvas context of the canvas element
PolyGen.context = PolyGen.canvas.getContext('2d');
//Declare the thickness of the lines of the shape
PolyGen.thickness = 8;
//Declare the color of the lines - it can be in any CSS color form (hex, rgb, rgba, name, etc)
PolyGen.color ='#2a2a2a';
//Declare the size of the shape - the radius
PolyGen.size = 2048;
//Create the shape by calling this function - replace 5 with the number of sides
PolyGen.create(5);
// or 
// Parameters: c = number of sides, a = canvas, m = canvas context,
// e = shape radius, r = shape border thickness, o = shape border color,
// n = shape x position , s = shape y position
PolyGen(c,a,m,e,r,o,n,s);

Changelog:

10/04/2018

• Allowed for only context parameter