JSFiddle - React, Tailwind, and code Playground

by Bartosz Zieliński

JavaScript

var canvas0 = document.createElement('canvas');
var context0 = canvas0.getContext('2d', undefined);
document.body.appendChild(canvas0);
canvas0.width = 2212
canvas0.height = 1841
context0.save();
context0.setTransform(1,0,0,1,0,0);
context0.beginPath();
context0.moveTo(0,0);
context0.lineTo(2212.1999413967133,0);
context0.lineTo(2212.1999413967133,1841.3999512195587);
context0.lineTo(0,1841.3999512195587);
context0.lineTo(0,0);
context0.clearRect(0,0,2212.1999413967133,1841.3999512195587);
context0.clip();
context0.setTransform(1,0,0,1,515,776);
context0.setTransform(1.3388996120048324,0,0,1.3388996120048324,515,776);
context0.setTransform(1.3388996120048324,0,0,1.3388996120048324,515,776);
context0.globalAlpha = 1;
context0.fillStyle = "#FF4F4F";
context0.fillRect(0,0,851,315);
context0.imageSmoothingEnabled = false;
context0.setTransform(1,0,0,1,515,776);
context0.setTransform(1,0,0,1,515,776);
context0.globalAlpha = 1;
var canvas1 = document.createElement('canvas');
var context1 = canvas1.getContext('2d', undefined);
canvas1.width=300;
canvas1.height=150;
canvas1.width = 1142
canvas1.height = 424
context1.save();
context1.setTransform(1,0,0,1,0,0);
context1.beginPath();
context1.moveTo(0,0);
context1.lineTo(1142,0);
context1.lineTo(1142,424);
context1.lineTo(0,424);
context1.lineTo(0,0);
context1.clearRect(0,0,1142,424);
context1.clip();
context1.setTransform(1,0,0,1,1,1);
context1.setTransform(1.3388996120048324,0,0,1.3388996120048324,1,1);
context1.beginPath();
context1.moveTo(0,0);
context1.lineTo(850.9973337686558,0);
context1.lineTo(850.9973337686558,314.9974771958316);
context1.lineTo(0,314.9974771958316);
context1.lineTo(0,0);
context1.closePath();
context1.fillStyle = "#000000";
context1.globalAlpha = 1;
context1.globalCompositeOperation = "color";
context1.fill("nonzero");
//           .
//          / \
// flushed /|...