html5 canvas images dont show or image not loaded

Question

i remove the link for copyright reason !.. sorry !

When you are in Firefox, the images at the left (all the mockup) is loaded, after a few refresh, in chrome and safari, it NEVER show

I think it's a image not loaded in memory problem, but i cant know when image are all loaded, i event put the script at the end, but no luck

So the question, what should do to make sur the images are loaded.. of is there and error in the JavaScript code ?

n.b. i have tough about encoding the images as base64 for canvas display... is it possible or intelligent to do that ?

Answer 1

Actually, you can determine when all the images have finished loading. In order to do this, you just need to specify a callback function for the onload property of the image object. So, you would end up with something like this (in addition to the code you already have in canvas.js):

var loaded_images = 0;
var image_objects = [];

// This is called once all the images have finished loading.
function drawOnCanvas() {
    for (var i = 0; i < image_objects.length; ++i) {
        ctx.drawImage(image_objects[i], 0, 0); 
    }
}

function handleLoadedImage() {
    ++loaded_images;

    // Check to see if all the images have loaded.
    if (loaded_images == 7) {
        drawOnCanvas();
    }
}

document.ready = function() {
    for (var i=0;i<myimages.length;i++) {
        var tempimage = new Image();
        tempimage.src= myimages[i];
        tempimage.onload = handleLoadedImage;
        image_objects[i] = tempimage;
    }
}

The key concept is that you are keeping track of the number of images that have finished loading. Once all of the images are done loading, you know you can draw on the canvas.