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).
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