JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

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

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';    
    
canvas.canvas1.ctx.clearRect ( 0 , 0 , 450 , 400 );
canvas.canvas2.ctx.clearRect ( 0 , 0 , 450 , 400 );


abposx = 10;
abposy = 10;


//doesn't draw
canvas.canvas1.ctx.drawImage(img1, abposx,abposy);  

//draws
canvas.canvas2.ctx.drawImage(img2, abposx+50, abposy+50);

} 

function start(){
window.canvas = new Object();
for(var i = 1; i < 3; i++){    
        
        document.getElementById("G").innerHTML += '<canvas width="450" height="400" id="layer'+i+'" class="c" style="z-index:'+i+';" oncontextmenu="return false;"></canvas>';    
        temp = document.getElementById('layer'+i);
        objname = 'canvas'+i;
        canvas[objname] = temp;
        canvas[objname].ctx =  temp.getContext("2d");
          
 }
    draw(); 
}
    
    start();