Having an issue with stacking multiple images on separate Canvas layers, and they're not drawing on the canvas. Can anyone help me figure out what I'm missing? Thanks
CSS
.positionCanvas{
position: absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
background: rgba(255,255,255,0);
}
#logoCanvas{
position: relative;
}
HTML
<div id="logoCanvas">
<canvas class="positionCanvas" width="300" height="300" id="outerRingCanvas">
</canvas>
<canvas class="positionCanvas" width="300" height="300" id="crossCanvas">
</canvas>
<canvas class="positionCanvas" width="300" height="300" id="innerRingsCanvas">
</canvas>
<canvas class="positionCanvas" width="300" height="300" id="centreCanvas">
</canvas>
</div>
JAVASCRIPT
var outerRing = document.getElementById('outerRingCanvas'),
cross = document.getElementById('crossCanvas'),
innerRings = document.getElementById('innerRingsCanvas'),
centre = document.getElementById('centreCanvas');
var outerCtx = outerRing.getContext('2d'),
crossCtx = cross.getContext('2d'),
innerRingsCtx = innerRings.getContext('2d'),
centreCtx = centre.getContext('2d');
var ctxArray = [outerCtx, crossCtx, innerRingsCtx, centreCtx];
var outerImg = new Image(),
crossImg = new Image(),
innerRingsImg = new Image(),
centreImg = new Image();
var imgArray = [outerImg, crossImg, innerRingsImg, centreImg];
outerImg.src = "logo_ring.png";
crossImg.src = "logo_cross.png";
innerRingsImg.src = "logo_centre_rings.png";
centreImg.src = "logo_centre.png";
placeLogos(ctxArray);
crossCtx.drawImage(crossImg, 0, 0, 300, 300);
function placeLogos(array){
for(var i = 0; i < array.length; i++){
array[i].drawImage(imgArray[i], 100, 100, 100, 100);
array[i].fillStyle = "rgba(233,100,10,0.2)"
array[i].fillRect(0, 0, 300, 300);
}
}