JSFiddle - React, Tailwind, and code Playground

HTML

<div id="G" class="Output"></div>

CSS

Output {
    width: 400px;
    height: 400px;
    position: relative;
}

.c {
    width: 400px;
    height: 400px;
    margin: 0 auto;
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid #aaa;
}

JavaScript

function draw() {
    img1 = new Image();
    img2 = new Image();

    img1.src = 'http://www.charcoaldesign.co.uk/images/icons.rbgl-sprites.png';
    img2.src = 'http://www.mymilitaryrental.com/apexaviationsolutions/wp-content/uploads/2011/07/logo_small.jpg';

    canvases[0].ctx.clearRect(0, 0, 400, 400);
    canvases[1].ctx.clearRect(0, 0, 400, 400);

    canvases[0].ctx.drawImage(img1, 0, 0);
    canvases[1].ctx.drawImage(img2, 50, 50);
}

function start() {
    canvases = [];
    
    for (var i = 0; i < 2; i++) {        
        var canvas = document.createElement('canvas');
        canvas.id = 'layer' + i;
        canvas.className = 'c';
        canvas.width = 400;
        canvas.height = 400;
        canvas.style.zIndex = i;
        
        document.getElementById('G').appendChild(canvas);
        
        canvases[i] = canvas;
        canvases[i].ctx = canvas.getContext("2d");;
    }
    
    draw();
}

start();