Рисунок JS Изображения на холсте

Question

Я пытаюсь пройти несколько изображений на отдельных слоях холста, которые сложены друг на друга, но изображения не нарисованы на холсте. Может ли кто-нибудь помочь мне с тем, что мне не хватает? Благодаря

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); 

    } 
} 

Answer 1

Используйте механизм OnLoad, как загрузка изображения является асинхронным. Если вы не используете это, изображение может не быть полностью загружено, когда вы попытаетесь использовать их, оставив пробелы.

... 

var imageCount = 4; 

outerImg.onload = loader; 
crossImg.onload = loader; 
innerRingsImg.onload = loader; 
centreImg.onload = loader; 

outerImg.src = "logo_ring.png"; 
crossImg.src = "logo_cross.png"; 
innerRingsImg.src = "logo_centre_rings.png"; 
centreImg.src = "logo_centre.png"; 

function loader() { 
    imageCount--; 

    if (imageCount === 0) { 
     placeLogos(ctxArray); 
     crossCtx.drawImage(crossImg, 0, 0, 300, 300); 
    } 
}