HTML 5 Canvas нарисовать изображение поверх другого изображения

Question

У меня есть два изображения, которые я хочу нарисовать на одном холсте.Проблема в том, что первое изображение, которое я рисую, может загружаться дольше, чем второе.Поскольку изображения нарисованы в событии загрузки, может случиться так, что первое изображение будет нарисовано поверх второго изображения.

Это не то, что я хочу, я всегда хочу, чтобы второе изображение было нарисовано поверх первого изображения.Есть идеи?

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];
}