HTML5的Canvas可以处理其中绘制的多个图像吗？

Question

The output page: http://tinyurl.com/9stfo3p The Code: http://tinyurl.com/8wz9krj

Direct Question: Am I approaching this the wrong way, or can HTML5 not handle so many images in one canvas?

Details: I made a script with PhP, HTML5, and Javascript in order to test some code for a dress up feature I wanted to perfect. When I was done, it worked fine. I then started refreshing the page to see how quickly the canvas would load/respond.

Some of the images would fail to show sometimes, and after a few more times of refreshing, nothing would show in the canvas at all.

I decided code this way so I won't have to bother with the GD Library, and if I wanted to add in an Animated Gif, I wouldn't have to do too much to the code (or at least, I don't think I'd have to).

Answer 1

Canvas can handle as many images in it as you like.

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

It should work if you just change it for:

window.onload = draw;

I've put your code in a fiddle, and you can see it working fine here