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








example use of polygon function

unit circle