HTML 5 Canvas draw image over other image

I have two images I wan开发者_StackOverflowt to draw on one canvas. The problem is that the first image I draw might take longer to load than the second one. Since the pictures are drawn on the onload event it could occur that the first image is drawn on top of the second picture.

This is not what I want, I always want the second image to be drawn on top of the first image. Any ideas?

---

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