The HTML file
<head>
<script src="seven.js"></script>
</head>
<body>
<canvas id="polygons" width="400" height="400" style="border:1px solid #000000;"></canvas>
<script type="text/javascript">
let points=[];
let sides = 3;
let r = 10;
while (sides < 20) {
MakePoints(sides,r, points);
DisplayPoints("polygons", points);
sides++;
r += 10;
}
</script>
</body>
"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 x,y;
for(i=0;i<=size;i++) {
x = r * Math.cos(theta);
y = r * Math.sin(theta);
points.push([x,y]);
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][0]+cx, points[0][1]+cy);
for (let i=1; i < points.length; i++) {
ctx.lineTo(points[i][0]+cx, points[i][1]+cy);
}
ctx.stroke();
}
}