HTML File
<head>
<script src="eight.js"></script>
</head>
<body>
<canvas id="polygons" width="400" height="400" style="border:1px solid #000000;"></canvas>
<script>
let points=[];
let sides = 3;
let r = 10;
while (sides < 20) {
MakePoints(sides,r, points);
DisplayPoints("polygons", points);
sides++;
r += 10;
}
</script>
"use strict"
function ClearArray(ary) {
ary.splice(0,ary.length);
}
function MakePoints(size, r, points) {
let i;
if (size > 2) {
ClearArray(points);
let angle = 2*Math.PI/size;
let theta = 0;
let xCord,yCord;
for(i=0;i<=size;i++) {
xCord = r * Math.cos(theta);
yCord = r * Math.sin(theta);
points.push({x:xCord, y:yCord});
theta+= angle;
}
}
return;
}
function Clear(canvasName){
let canvas = document.getElementById(canvasName);
let ctx = canvas.getContext('2d');
ctx.clearRect(0,0,canvas.width, canvas.height);
return;
}
function DisplayPoints(canvasName, points){
if (points.length > 2) {
let canvas = document.getElementById(canvasName);
let ctx = canvas.getContext('2d');
let cx = canvas.width/2;
let cy = canvas.height/2;
ctx.beginPath();
ctx.moveTo(points[0].x+cx, points[0].y+cy);
for (let i=1; i < points.length; i++) {
ctx.lineTo(points[i].x+cx, points[i].y+cy);
}
ctx.stroke();
}
}