JSFiddle - React, Tailwind, and code Playground

by ivanov_vitaly

HTML

<canvas id="canv" width="300" height="300"><canvas>

JavaScript

var ctx = document.getElementById("canv").getContext("2d");

ctx.strokeStyle = "white";
ctx.lineWidth = 1;
ctx.fillStyle = "black";
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);


drawPolygon(150, 150, 70, 12);
//drawPolygon(150, 150, 70, 12);
//drawPolygon(150, 150, 70, 12);
//drawPolygon(150, 150, 70, 12);
//drawPolygon(150, 150, 70, 12);
//drawPolygon(150, 150, 70, 12);


function drawPolygon(centerX, centerY, r, edges){
    ctx.beginPath();
    ctx.moveTo(centerX, centerY);
    
    var step = (Math.PI * 2) / edges;
       
    for(var i = 0; i <= edges; i++){
        var x = r * Math.cos(step * i) + centerX;
        var y = r * Math.sin(step * i)  + centerY;
        
        if (i == 0) {
            ctx.moveTo(x, y);            
        }
        else {
            ctx.lineTo(x, y);                  
        }                         
    }
    
    var g = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, 70);
    g.addColorStop(0, "rgba(255, 240, 255, 1)");
    //g.addColorStop(1, "rgba(0, 0, 0, 1)");   

    ctx.fillStyle = g;    
    ctx.fill();
    
    ctx.shadowColor ="rgba(255, 200, 255, 0.7)";
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = -20;
    ctx.shadowBlur = 30;

    ctx.fill();

    ctx.shadowColor ="rgba(255, 200, 255, 0.7)";
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 20;
    ctx.shadowBlur = 25;

    ctx.fill();
        
    ctx.closePath();    
};