CODEWITHSUNDEEP
imagehtmlcanvas
Daan
Daan

Reputation: 432

HTML 5 Canvas draw image over other image

I have two images I want 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?

Upvotes: 0

Views: 3418

Answers (1)

user123444555621
user123444555621

Reputation: 153274

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

Upvotes: 4

Related Questions