I'm trying to preload a number of images, prior to drawing them using Canvas. I've googled, and read and managed to find some code (with revisions) to cycle through a list of URLs. However, I can't seem to be able to set the housing_image.src to a URL within the list.

Using console.log I can see that the URL is reporting correctly, but when I assign it to the hosuing_image.src the console.log appears blank.

Hopefully it is something super simple that I am missing...

const imageURL = ["https://syrathos.net/other/sale_sign.png","https://syrathos.net/other/housing_1.png"];
    const images = [];
    var imageCount = 0;

function allLoaded(){
    context.drawImage(images[1],0,0);
    context.drawImage(images[0],0,0);
}

for (const URL of imageURL) {
     const housing_image = new Canvas.Image();    
     housing_image.onload = ()=>{ 
        console.log("loaded : " + housing_image.src)
         imageCount += 1;
         if(imageCount === imageURL.length){
             allLoaded();
         }
     }
     console.log(URL)
     housing_image.src = URL;
     images.push(housing_image);
     console.log(housing_image.src);

};

Console Log