siteIcon

Tech Novice Tools

JS Grafix Sandbox

burgerIcon
spiral

JSGrafix Sandbox (JSGS)

TNT GenPolygon

Your browser does not support HTML5 Canvas
Notes:

A TNTGenPolygon opens the door for non-regular shapes composed of segments. To do this, it needs an 'array' of TNTPoints which form the vertices (corners) of the shape, and of course, a TNTColor for fill color (fcolr) and a TNTStroke for borders. There is the ability of rotation as well. Corner points may be shown or hidden using the 'showPoints' boolean property.

Features and Usage:

Primary Attributes:

4 parameters:
arrayOfPoints(TNTPoints), fillColor(TNTColor), borderColor(TNTStroke), rotationInDegrees(double)

The array of points must begin and end with the same point (to finish the curve); Unless you want the curve to cross in on itself, you must traverse the shape clockwise or counterclockwise
To Create:(Example above)

var ptA = new TNTPoint(1, 1);
var ptB = new TNTPoint(3, 10);
var ptC = new TNTPoint(8, -12);
var ptD = new TNTPoint(2, -6);
var myPts = new Array(ptA, ptB, ptC, ptD, ptA); //must begin/end with same point
//TNTGraphic Objects
var rotation = 0;
var myPoly = new TNTGenPolygon(myPts, purple, magentaStroke, rotation);
myPoly.showPoints = true;

var myPoly2 = myPoly;
myPoly2.rotn = 90;
myPoly2.fcolr = white;
myPoly2.stroke = magentaStroke;
To Draw:

myPoly.drawTNTGenPolygon(context);
myPoly2.drawTNTGenPolygon(context);
Comments: Note that the rotation is about the origin of the coordinate system. Generally, it's easier to draw these critters without a rotation, at least originally.
Even More:

When making the points, start at a vertex and create future ones in either a clockwise or counter-clockwise fashion. If you hop around, the image will get 'twisted'

. Also, be sure to make the last point the same as the first to close the figure.