Easy Polygon Generator Based On JavaScript And Canvas – PolyGEN

Category: Javascript | October 4, 2018
Author: CameronSamuels
Views Total: 2,218
Official Page: Go to website
Last Update: October 4, 2018
License: MIT

Preview:

Easy Polygon Generator Based On JavaScript And Canvas – PolyGEN

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

You Might Be Interested In:


Leave a Reply