PolyGEN: JavaScript Canvas Polygon Generator

PolyGEN is a JavaScript Canvas library that draws regular polygon outlines on an HTML5 canvas element.

It handles the path math for triangle, pentagon, hexagon, and other n-sided shapes through one global PolyGen() function.

Features:

• Draws regular polygon outlines on an HTML5 canvas.
• Sets the number of sides, radius, stroke width, stroke color, and center point.
• Uses the Canvas 2D context when you pass one or lets the function read it from the canvas.
• Works as a small browser script for static Canvas shape generation.

How To Use It:

Download polygen.js and load it after the canvas element or before your drawing script.

<canvas id="polygonCanvas" width="2048" height="2048"></canvas>
<script src="polygen.js"></script>

Select the canvas, get its 2D context, and pass the drawing values into PolyGen().

const canvas = document.getElementById('polygonCanvas');
const context = canvas.getContext('2d');
// Draw a 5-sided polygon with a 400px radius.
PolyGen(
  5,                 // Number of sides
  canvas,            // Canvas element
  context,           // Canvas 2D context
  400,               // Radius
  8,                 // Stroke width
  '#2a2a2a',          // Stroke color
  canvas.width / 2,  // X center
  canvas.height / 2  // Y center
);

You can also let PolyGEN read the 2D context from the canvas. Pass a falsy third argument when you prefer this shorter form.

const canvas = document.querySelector('canvas');
// Draw a centered triangle.
PolyGen(3, canvas, 0, 300, 6, '#222');

Configuration Parameters:

• c: Number of polygon sides. Defaults to 3.
• a: Canvas element used for drawing.
• m: Canvas 2D context. When omitted or falsy, PolyGEN uses a.getContext('2d').
• e: Polygon radius. Defaults to half of the smaller canvas dimension.
• r: Stroke width. Defaults to 8.
• o: Stroke color. Defaults to #000.
• n: X position for the polygon center. Defaults to canvas.width / 2 when omitted or falsy.
• s: Y position for the polygon center. Defaults to canvas.height / 2 when omitted or falsy.

API:

// Draw a polygon outline on a canvas.
PolyGen(sides, canvas, context, radius, strokeWidth, strokeColor, centerX, centerY);
// Example: draw a hexagon.
PolyGen(6, canvas, context, 250, 4, 'rgba(0, 0, 0, 0.8)', 400, 400);

Implementation Notes:

• Set the canvas width and height attributes before drawing. CSS-only sizing can change the displayed scale.
• Use a radius smaller than half of the canvas size when the polygon sits in the center.
• Move the center point away from the canvas edge when large polygons appear clipped.
• The current function treats falsy centerX and centerY values as missing values, so exact 0 positions fall back to the canvas center.
• The library strokes polygon outlines. Add Canvas fill logic yourself when you need filled shapes.

Related Resources:

• Rounded Polygon Generator
• 2D Canvas Drawing JavaScript Library – drawJS
• Declarative Canvas Drawing in JavaScript – DrawableJS
• Generate Polygon Patterns From Triangles – Trianglify

FAQs:

Does PolyGEN require jQuery?

No. PolyGEN uses plain JavaScript and the HTML5 Canvas 2D API.

Can PolyGEN draw filled polygons?

The current function draws stroked polygon outlines. Use the Canvas context directly or modify the function when your project needs filled shapes.

Why does my polygon appear clipped?

The radius may be larger than the available canvas area. Reduce the radius or move the center point farther from the edge.

Can I draw multiple polygons on the same canvas?

Yes. Call PolyGen() multiple times with different side counts, radii, colors, or center positions.

Changelog

10/04/2018

• Allowed usage with only the context parameter.