Canvas not rendering images at all

Question

I have an array of enemies sent from the server and I am recreating them because they were serialized. After, I'm trying to get them to render on the canvas, but that isn't working for some reason.

for (var i = 0; i < enemies.length; i++) { // recreate each enemy and render it
    var image = new Image();
    var currentFish = new Fish();
    for (var key in enemies[i]) { // copying properties to object that has the necessary methods
        if (enemies[i].hasOwnProperty(key)) {
            currentFish[key] = enemies[i][key];
        }
    }
    image.src = currentFish.icon;
    image.onload = function () {
        ctx.drawImage(image, currentFish.position.x, currentFish.position.y);
    };
    ctx.fillText('Drone', 250, 200);    
}

I think the issue is that image.onload is not called until after or in between frames so it isn't seen. I'm not sure how to work around this.

Edit:

I forgot to mention that I'm using requestAnimationFrame to handle rendering the canvas, so I don't know when the frame is going to be rendered.

Answer 1

The problem is that your outside for loop is overwriting the image variable with each loop (before the image can be loaded and drawn).

Try this alternative image loader which preloads all images into imgs[] and then calls start():

// image loader

var imageURLs = [];  // put the paths to your images here
var imagesOK = 0;
var imgs = [];
imageURLs.push("");
loadAllImages(start);

function loadAllImages(callback) {
    for (var i = 0; i < imageURLs.length; i++) {
        var img = new Image();
        imgs.push(img);
        img.onload = function() { 
            imagesOK++; 
            if (imagesOK >= imageURLs.length) {
                callback();
            }
        };
        img.onerror = function() {alert("image load failed");} 
        img.crossOrigin = "anonymous";
        img.src = imageURLs[i];
    }      
}

function start() {

    // imgs[] holds fully loaded images
    // imgs[] is in the same order as imageURLs[]

}