JSFiddle - React, Tailwind, and code Playground

by Leo Bernardo

HTML

<div class="gfwrapper">
    <canvas id="gfwhite" width="800" height="600"></canvas>
    <canvas id="gfblack" width="800" height="600"></canvas>
    <canvas id="gfgray" width="800" height="600"></canvas>
    <canvas id="uimain" width="800" height="600"></canvas>

CSS

#gfwhite{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

#gfblack{
    position:absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#gfgray{
    position: absolute;
    top: 0;
    left:0;
    z-index: 2;
}

#uimain{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

JavaScript

var drawIt = function(canvasCtx, drawObj, x, y) {
   drawObj.onload = function(){
       canvasCtx.drawImage(drawObj, x, y);
   }
};

var whiteCanvas = document.getElementById("gfwhite");
var whiteCtx = whiteCanvas.getContext("2d");

var blackCanvas = document.getElementById("gfblack");
var blackCtx = blackCanvas.getContext("2d");

var grayCanvas = document.getElementById("gfgray");
var grayCtx = grayCanvas.getContext("2d");

var mmCanvas = document.getElementById("uimain");
var mmCtx = mmCanvas.getContext("2d");


var image1 = new Image();
image1.src="http://folhaz.com.br/cms/wp-content/uploads/2014/02/carnaval-300x237.jpg";

var image2 = new Image();
image2.src = "https://www.google.com.br/images/srpr/logo11w.png";

var image3 = new Image();
image3.src = "http://folhaz.com.br/cms/wp-content/uploads/2012/10/sky-tv.jpg"

var image4 = new Image();
image4.src = "http://folhaz.com.br/cms/wp-content/uploads/2013/12/web300x180px1.jpg";

function drawScreen(){
   drawIt(whiteCtx,image1,0,0);
   drawIt(blackCtx,image2,0,0);
   drawIt(grayCtx,image3,0,0);
   drawIt(mmCtx,image4,0,0);
}

drawScreen();