JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

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

CSS

#canvas{border:1px solid red;background:grey;}

JavaScript

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

var points=[];
points.push({x:130,y:130});
points.push({x:200,y:130});
points.push({x:250,y:165});
points.push({x:200,y:200});
points.push({x:130,y:200});

definePath();
ctx.fill();
ctx.globalCompositeOperation ='destination-out';
ctx.stroke();
ctx.globalCompositeOperation='source-atop';
ctx.clip();
ctx.save();

ctx.fillStyle = 'rgb(255,0,0)';
ctx.fill();


for(var i =1;i<4;i+=1){
    
ctx.restore();
ctx.save();
ctx.translate(-i,-i);
definePath();

ctx.lineWidth=(Math.SQRT2*i);
ctx.strokeStyle = 'rgba(0,0,0,.3)';
ctx.stroke();
}
for(var i =1;i<4;i+=1){
    
ctx.restore();
ctx.save();
ctx.translate(i,i);
definePath();

ctx.lineWidth=(Math.SQRT2*i);
ctx.strokeStyle = 'rgba(255,255,255,.3)';
ctx.stroke();
}

ctx.restore();

function definePath(){
    ctx.beginPath();
    ctx.moveTo(points[0].x,points[0].y);
    for(var i=1;i<points.length;i++){
        var pt=points[i];
        ctx.lineTo(pt.x,pt.y);
    }
    ctx.quadraticCurveTo(80,165,130,130);
    ctx.closePath();

}