JSFiddle - React, Tailwind, and code Playground

by Ben Watts

HTML

<canvas id="canvas1" width="500" height="400">Sorry but your browser doesn't support the canvas tag.</canvas>
<canvas id="canvas2" width="500" height="400">Sorry but your browser doesn't support the canvas tag.</canvas>
<canvas id="canvas3" width="500" height="400">Sorry but your browser doesn't support the canvas tag.</canvas>

CSS

canvas{
    position: absolute;
}

JavaScript

var canvas1 = document.getElementById('canvas1');
var context1 = canvas1.getContext('2d');
var canvas2 = document.getElementById('canvas2');
var context2 = canvas2.getContext('2d');
var canvas3 = document.getElementById('canvas3');
var context3 = canvas3.getContext('2d');

var image1 = new Image();
image1.src = "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQRsJ_wNvd0PfISyPZ5a_QI3Dpeo0g4T5Tuk-R26JXPxfhyFxBTVQ";
var image2 = new Image();
image2.src = "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQQqnYE7Xtre5W0seeFETl00OPSGoujI6xUOHr18GzB4hJE5bCIaQ";
var image3 = new Image();
image3.src = "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRkg3mvI5DwGqG9AUmOEVU6bDDQgM6fT7nQKr8D7XwbQ59lxDiVlA";

context1.globalAlpha = 0.8;
context1.drawImage(image1, 0, 0);

context2.globalAlpha = 0.3;
context2.drawImage(image2, 0, 0);

context3.globalAlpha = 0.5;
context3.drawImage(image3, 0, 0);