How to process many images in my HTML5 canvas?

Question

I am very new to Html5 and Javascript canvas. I try this:

function animate() { var image1 = new Image(); image.src = /path var image2 = new Image(); image2.src = /path for(;;) { //change value of x and y so that it looks like moving context.beginPath(); context.drawImage(<image>, x, y ); context.closePath(); context.fill(); } } 

EDIT:

And I call the animate function every 33 ms:

 if (playAnimation) { // Run the animation loop again in 33 milliseconds setTimeout(animate, 33); }; 

If I follow the answer given here, I get the image hit and its further movement.

Answer 1

Refresh . Based on the new information in the question, your problem (fixed) is that you want to either

• wait for all images to load first, and then start animating with them or
• Start the animation and use only the image, if available.

Both are described below.

1. Download many images and continue only after their completion.

Using this technique, we immediately download all the images, and when loading the latter, we launch our own callback.

Demo: http://jsfiddle.net/3MPrT/1/

 // Load images and run the whenLoaded callback when all have loaded; // The callback is passed an array of loaded Image objects. function loadImages(paths,whenLoaded){ var imgs=[]; paths.forEach(function(path){ var img = new Image; img.onload = function(){ imgs.push(img); if (imgs.length==paths.length) whenLoaded(imgs); } img.src = path; }); } var imagePaths = [...]; // array of strings loadImages(imagePaths,function(loadedImages){ setInterval(function(){ animateInCircle(loadedImages) }, 30); }); 

2. Track all downloaded images

Using this technique, we immediately begin the animation, but only draw images after they are downloaded. Our circle is dynamically resizing based on how many images are uploaded so far.

Demo: http://jsfiddle.net/3MPrT/2/

 var imagePaths = [...]; // array of strings var loadedImages = []; // array of Image objects loaded so far imagePaths.forEach(function(path){ // When an image has loaded, add it to the array of loaded images var img = new Image; img.onload = function(){ loadedImages.push(img); } img.src = path; }); setInterval(function(){ // Only animate the images loaded so far animateInCircle(loadedImages); }, 100); 

And if you want the images to rotate in a circle, and not just to move in a circle:

Rotating Images: http://jsfiddle.net/3MPrT/7/

 ctx.save(); ctx.translate(cx,cy); // Center of circle ctx.rotate( (angleOffset+(new Date)/3000) % Math.TAU ); ctx.translate(radius-img.width/2,-img.height/2); ctx.drawImage(img,0,0); ctx.restore(); 

---

The following is the original answer.

In general, you should wait for each image download to complete:

 function animate(){ var img1 = new Image; img1.onload = function(){ context.drawImage(img1,x1,y1); }; img1.src = "/path"; var img2 = new Image; img2.onload = function(){ context.drawImage(img2,x2,y2); }; img2.src = "/path"; } 

You can make this code drier with an object:

 var imgLocs = { "/path1" : { x:17, y:42 }, "/path2" : { x:99, y:131 }, // as many as you want }; function animate(){ for (var path in imgLocs){ (function(imgPath){ var xy = imgLocs[imgPath]; var img = new Image; img.onload = function(){ context.drawImage( img, xy.x, xy.y ); } img.src = imgPath; })(path); } }