pi-r-fun.com
Polygon Generator 800X800 Canvas
This page uses (see example page ) a JavaScript function to generate and position polygons on a HTML canvas. The basic algorithm of the function involves dividing 1 by the number of polygon angles, multiply that value by the angle number. Multiply those values by 6.28 to get radian values. Multiply the sine and cosine of the radian values by the hypotenuse to get x an y values. Store those values in arrays, transpose the values to canvas coordinates and connect the points with lines. All that sounds quite complicated but understanding the principle of the counter clockwise revolution makes it understandable. To create a square divide 1 by 4, the value is .25. Angle 1 is .25 angle 2 is 2*.25(.50), 3 is .75 and 4 is 1.00. The polygon function accepts an offset parameter to tilt the polygon. The function's parameter list also includes origin location values of virtual cartesian cooridinate systems, virtual cartesian hypotenuse, line width, color, number of polygon sides, canvas ID and fill option. The function can be called multiple times with in a javascript program.
color
 black blue green yellow red pink orange gray maroon teal number of sides 3 4 5 6 7 8 9 10 11 12 line width 1 2 3 4 5 6 8 10 12 14 virtual hypotenuse size 5 10 25 50 100 150 200 250 300 350 virtual x origin 25 100 200 300 400 500 600 700 750 775 virtual y origin 25 100 200 300 400 500 600 700 750 775 rotation offset .08 .16 .25 .125 .33 .10 0 .05 .5 .66