issue loading images on HTML canvas

Question

So far I have a function next which is supposed to get a the time(just the hours) which then compares the hours in an if statement to load the correct clock into the imageURLs[] array. As far as I can tell this works fine. Then running the loadAllimages() function it should load the image into the array imgs[]. Then it should draw the images in the method start(). I did it in this way because the pill image is on top of the clock and I needed it to load correctly. The problem is the loadAllimages() function is not working and i can't figure out why. So far all i can tell is it not pushing it on the array imgs[] because at the start of the start() function imgs.length is 0.

function next(){
var currentdate = new Date();
var datetime = currentdate.getHours();
var imageURLs=[];
var imagesOK=0;
var imgs=[];
if(datetime==1||datetime==13){
imageURLs.push("clock/clock1.png");
imageURLs.push("clock/pill.png");
}
else if(datetime==2||datetime==14){
imageURLs.push("clock/clock2.png");
imageURLs.push("clock/pill.png");
}
else if(datetime==3||datetime==15){
imageURLs.push("clock/clock3.png");
imageURLs.push("clock/pill.png");
}
else if(datetime==4||datetime==16){
imageURLs.push("clock/clock4.png");
imageURLs.push("clock/pill.png");
}
else if(datetime==5||datetime==17){
imageURLs.push("clock/clock5.png");
imageURLs.push("clock/pill.png");
}
else if(datetime==6||datetime==18){
imageURLs.push("clock/clock6.png");
imageURLs.push("clock/pill.png");
}
else if(datetime==7||datetime==19){
imageURLs.push("clock/clock7.png");
imageURLs.push("clock/pill.png");
}
else if(datetime==8||datetime==20){
imageURLs.push("clock/clock8.png");
imageURLs.push("clock/pill.png");
}
else if(datetime==9||datetime==21){
imageURLs.push("clock/clock9.png");
imageURLs.push("clock/pill.png");
}
else if(datetime==10||datetime==22){
imageURLs.push("clock/clock10.png");
imageURLs.push("clock/pill.png");
}
else if(datetime==11||datetime==23){
imageURLs.push("clock/clock11.png");
imageURLs.push("clock/pill.png");
}
else if(datetime==0||datetime==12){
imageURLs.push("clock/clock12.png");
imageURLs.push("clock/pill.png");
}

loadAllImages();

function loadAllImages(){

    for (var i=0; i<imageURLs.length; i++) {
        var img = new Image();
        img.src = imageURLs[i];
        img.onload = function(){ 
            imgs.push(img);
        };
    } 
    if(i==imageURLs.length){
    start();
    }

}

function start(){
    // the imgs[] array holds your fully loaded images
    for (var i=0; i<imgs.length; i++) {
    if(i==0){
        canvas.ctx.drawImage(this, 600,100);
        }
        else{
        canvas.ctx.drawImage(this, 740, 240 );
        }
    }
    // the imgs[] are in the same order as imageURLs[]

}
}

Answer 1

The loading happens asynchronously, not immediately. You should change your code to

imgs.push(img);
if (imgs.length == imageURLs.length) start();

inside the onload handler.

Note however that's possible that the order in the imgs array will not be the same as the order in the imageURLs array.

IMO a cleaner approach would be however to put the images immediately in the list and just incrementing a counter when the load completes:

function loadAllImages(){
    var count = 0;
    for (var i=0; i<imageURLs.length; i++) {
        var img = new Image();
        img.onload = function(){
            if (++count == imageURLs.length) start();
        };
        img.src = imageURLs[i];
        imgs.push(img);
    }
}

this way the order in which the images are in the array is the order in the imageURLs array.