JSFiddle - React, Tailwind, and code Playground

by Andrea Bogazzi

HTML

<img id="test" />

JavaScript

var canvas = document.createElement('canvas');
var canvasFinal = document.createElement('canvas');
canvas.width = 1000;
canvas.height = 300;
canvasFinal.width = 1000;
canvasFinal.height = 1000;

context = canvas.getContext('2d');
contextFinal = canvasFinal.getContext('2d');

context.shadowColor = 'black';
context.shadowOffsetX = 250;
context.shadowOffsetY = 0;
context.fillStyle = 'red';

for (var i = 0; i < 1000; i++) {
	context.shadowBlur = i;
  context.fillRect(-400, -100, 700, 1000);
  contextFinal.drawImage(canvas, 0, 250, 1000, 1, 0, i, 1000, 1);
  context.clearRect(0, 0, 1000, 300)
}

document.getElementById('test').src = canvasFinal.toDataURL();