Actually, you can determine when all the images have finished loading. To do this, you just need to specify the callback function for the onload
property of the image object. So, you 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 basic concept is that you keep track of the number of images that have finished uploading. Once all the images have been uploaded, you know that you can draw on canvas.
source share