Can HTML5 Canvas process multiple images in it?

Question

Output Page: http://tinyurl.com/9stfo3p Code: http://tinyurl.com/8wz9krj

The direct question is: am I approaching this incorrectly, or does HTML5 not process so many images in one canvas?

Details: I created a script with PhP, HTML5, and Javascript to check on the dressing code that I would like to improve. When I finished, everything worked out perfectly. Then I started to refresh the page to find out how fast the canvas would load / respond.

Some of the images will not be displayed sometimes, and after a few more recent updates, nothing will be displayed on the canvas at all.

I decided to make the code in such a way that I did not have to worry about the GD library, and if I wanted to add to Animated Gif, I would not have to work too much with the code (or at least I don’t think I have to) .

Answer 1

Canvas can handle as many images as possible.

In your case, I see an Uncaught TypeError: Cannot call method 'getContext' of null , possibly because you are doing window.onload = draw() , which immediately calls the draw method and before the DOM is ready.

It should work if you just change it to:

 window.onload = draw; 

I put your code in a fiddle and you can see how it works perfectly here