Generate html5 canvas polygons

View repo on GitHub

PolyGEN is an HTML canvas JavaScript library for generating polygons on a canvas.
See example.html for the basic usage.

Get started

First download polygen.js (or better yet, use polygen.min.js for faster speed) to your code folder. Then use this code relatively in your app:


<canvas width="4096" height="4096"></canvas>
<script src="polygen.min.js"></script>


//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

If you want to clear the canvas, you can easily do that using PolyGen.clear()

Be aware of the license for PolyGEN


This library was made by Cameron Samuels, inspired by Ludum Dare 35 when desperately needing to generate a polygon with any amount of sides.