how to use drawImage after load all images in array

Question

I want to draw image array with drawImage after all the images are loaded.There is a render problem with drawImage(), tried to solve with setTimeout() but its not working all the time.

Here is my code;

    while(FocusItem.length>0)
    {
        FocusItem.pop();
    }

    ftx=canvas.getContext('2d');

    focusImageBackground = new Image();
    focusImageBackground.src = "./images/odaklanma/odaklanmaBackground.jpg";

    if(RandomSoru==15)
        finishSoru=true;

    if(finishSoru)
    {
        RandomSoru = Math.floor((Math.random() * 15)+1);
        tempRandomSoru=RandomSoru;
    }

    if(RandomSoru==tempRandomSoru)
    {
        RandomSoru = Math.floor((Math.random() * 15)+1);
    }

    var soru = new Object();
    soru["image"] =  new Image();
    soru.image.src = './images/odaklanma/level/'+RandomSoru+'/soru.png';
    soru["x"] = 341;
    soru["y"] = 140;
    FocusItem.push(soru);

    var dogru = new Object();
    dogru["image"] =  new Image();
    dogru.image.src = './images/odaklanma/level/'+RandomSoru+'/dogru.png';
    dogru["x"] = xDogru;
    dogru["y"] = 280;
    FocusItem.push(dogru);

    var yanlis = new Object();
    yanlis["image"] =  new Image();
    yanlis.image.src = './images/odaklanma/level/'+RandomSoru+'/yanlis.png';
    yanlis["x"] = xYanlis1;
    yanlis["y"] = 280;
    FocusItem.push(yanlis);

    var yanlis2 = new Object();
    yanlis2["image"] =  new Image();
    yanlis2.image.src = './images/odaklanma/level/'+RandomSoru+'/yanlis1.png';
    yanlis2["x"] = xYanlis2;
    yanlis2["y"] = 280;
    FocusItem.push(yanlis2);

}

if(focusImageBackground.complete){
    if(FocusItem[0].image.complete && FocusItem[1].image.complete && FocusItem[2].image.complete && FocusItem[3].image.complete)
    drawFocus();
    else
        setTimeout(drawFocus,600);
}
else
    focusImageBackground.onload=function(){
        if(FocusItem[0].image.complete && FocusItem[1].image.complete && FocusItem[2].image.complete && FocusItem[3].image.complete)
            drawFocus();
        else
            setTimeout(drawFocus,600);
    }


function drawFocus(){
ftx.drawImage(focusImageBackground,0,0);

for (var i=0; i<FocusItem.length; i++){
    FocusItem[i].image.onload=function(){
        ftx.drawImage (FocusItem[i].image, FocusItem[i].x, FocusItem[i].y);
    }

}

}

What's the error? Can you post it on jsfiddle.com so we can see it? — bribeiro, Aug 15 '14 at 22:35

score 0 · Accepted Answer · edited May 23 '17 at 11:57

I'd suggest loading all your images, then when they are all done, you can call the rest of your code. I don't quite follow what you're trying to do with all the rest of your code, but here's a simple way to load an array of image URLs and know when they are done.

This is the general idea (I've left out lots of your code that has nothing to do with the central issue of knowing when all the images are loaded) and I've also tried to DRY up your code:

function createImagesNotify(srcs, fn) {
   var imgs = [], img;
   var remaining = srcs.length;
   for (var i = 0; i < srcs.length; i++) {
       img = new Image();
       imgs.push(img);
       img.onload = function() {
           --remaining;
           if (remaining == 0) {
               fn(srcs);
           }
       };
       // must set .src after setting onload handler
       img.src = srcs[i];
   }
   return(imgs);
}

// here's your starting array of filenames
var fnames = ["soru.png", "dogru.png", "yanlis.png", "yanlis1.png"];
// insert your process to create RandomSoru here
var randomSoru = ....;

// build full urls array
var urls = [];
for (var i = 0; i < fnames; i++) {
    urls.push('./images/odaklanma/level/' + RandomSoru + '/' + fnames[i]);
}

// load all images and call callback function when they are all done loading
var imgs = createImagesNotify(urls, function() {
    // all images have been loaded here
    // do whatever you want with all the loaded images now (like draw them)

});

This code is based on an earlier answer of mine here: Cross-browser solution for a callback when loading multiple images?

how to use drawImage after load all images in array

1 Answers1