HTML 5 캔버스 다른 이미지 위에 이미지 그리기

Question

하나의 캔버스에 그릴 두 개의 이미지가 있습니다. 문제는 내가 그린 첫 번째 이미지가 두 번째 이미지보다로드하는 데 오래 걸릴 수 있다는 것입니다. onload 이벤트에 그림이 그려지기 때문에 첫 번째 이미지가 두 번째 그림 위에 그려지는 경우가 발생할 수 있습니다.

이것은 내가 원하는 것이 아니며 항상 두 번째 이미지를 첫 번째 이미지 위에 그려야합니다. 어떤 아이디어?

Answer 1

var imgSrcs = ['url1', 'url2']; // <- put image URLs here 

var imgs = []; 
var loaded = 0; 
var loadCallback = function() { 
    loaded++; 
    if (loaded == imgSrcs.length) { 
     // draw imgs in correct order 
    } 
}; 

for (var i = 0; i < imgSrcs.length; i++) { 
    imgs[i] = new Image(); 
    imgs[i].addEventListener('load', loadCallback, false); 
    imgs[i].src = imgSrcs[i]; 
}