JSFiddle - React, Tailwind, and code Playground

by indatawetrust

HTML

<canvas width="400" height="400"></canvas>

CSS

canvas{
    background-color:#fd0;
}

JavaScript

var canvas = document.querySelector('canvas');
var num = document.querySelector('input');
var c = canvas.getContext('2d');

function cokgen(n,k){
    if(typeof n == "number")
        if(n<=2)
            n = 3
        else 
            n = n            
    else
       n = 3
    var r = 360/n;
    c.moveTo(Math.cos(r*1*(Math.PI/180))*k+canvas.width/2,Math.sin(r*1*(Math.PI/180))*k+canvas.height/2);
for(var i=0;i<n+1;i++){
    var x = Math.cos(r*i*(Math.PI/180))*k+canvas.width/2;
    var y = Math.sin(r*i*(Math.PI/180))*k+canvas.height/2;    
    c.lineTo(x,y);
}
c.lineCap = "square"
c.lineWidth = 2;
c.stroke();
}
for(var i=1;i<10;i++)
    cokgen(i+2,i*20+15)