JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas1" width="500" height="500"></canvas>

JavaScript

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

var can2 = document.createElement('canvas');
can2.width = 90;
can2.height = 90;
var ctx2 = can2.getContext('2d');

var radGrad = ctx.createRadialGradient(84, 84, 10, 84, 84, 35);
radGrad.addColorStop(0, 'black');
radGrad.addColorStop(0.4, 'black');
radGrad.addColorStop(.9, 'rgba(0,0,0,0)');



ctx.save()

ctx.fillStyle = 'lightblue';
ctx.lineWidth = 2;
ctx.shadowColor = 'black';
ctx.shadowOffsetX = 8;
ctx.shadowOffsetY = 8;
ctx.shadowBlur = 20;
ctx.fillRect(50, 50, 50, 50);
ctx.shadowColor = 'rgba(0,0,0,0)'; // turn off shadow color for stroke
ctx.strokeRect(50, 50, 50, 50);

ctx.restore();

ctx2.drawImage(can, 40,40,90,90, 0, 0, 90, 90);

ctx.translate(100, 0);

ctx.fillStyle = radGrad;
ctx.fillRect(30, 30, 150, 150);
ctx.fillStyle = 'lightblue';
ctx.fillRect(50, 50, 50, 50);
ctx.strokeRect(50, 50, 50, 50);

ctx.translate(100, 0);

ctx.fillStyle = 'rgba(0,0,0,.2)';
ctx.fillRect(54, 54, 54, 54);
ctx.fillStyle = 'lightblue';
ctx.lineWidth = 2;
ctx.fillRect(50, 50, 50, 50);
ctx.strokeRect(50, 50, 50, 50);

ctx.translate(100, 0);

ctx.drawImage(can2,40,40);