Adding a canvas-sprite object to a canvas?

I've been playing around with HTML5 and canvas and sprites and I've managed to get myself a bit stumped. I was wonderring if there was anyone out there with just a bit more experience than me who could help me 'tune' this (and also make it work).

I've got all the code up on GitHub https开发者_如何学C://github.com/AlexChesser/jsSprite and have put a live demo up over here http://chesser.ca/jsSprite

What you can see from Test 01 and 02 is that I'm able to send the Minotaur directly to the on-page canvas, I'm able to animate the Minotaur on the canvas... but when I try to create the Minotaur and add it to another canvas - I'm getting a blank screen.

(attempting to implement https://github.com/AlexChesser/jsSprite/blob/master/03-animated_minotaur_on_canvas.php)

I know it must be something small and sill that I'm doing wrong here, but I've been staring at it for hours and I can't track down the problem.

I thought I'd try posting up here to see if there's anyone who can see it 'in one go' AND to maybe let me know if there's anything I can do better.

If you're interested in getting a little further under the hood on this stuff, the lion's share of the code for this is coming from a Blog post http://www.johnegraham2.com/web-technology/html-5-canvas-tag-sprite-animation-demo/

Anyways, maybe it's one of those things that "comes to you" once you've walked away from the problem for a little bit. Fingers crossed I can either figure it out or someone out ther ecan give me that little push in the right direction.

Thanks! :)

I just stepped through your code.

MainContext.drawImage(m.canvas, 0, 0, m.width, m.height);

is occuring before drawFrame gets called because the image isn't ready yet.

So the mainContext.drawImage is drawing a canvas that has nothing painted on it yet.

Then the Sprite's canvas is loaded and ready to go, but its too late!

For confirmation, you can call MainContext.drawImage(m.canvas, 0, 0, m.width, m.height); in the browser console and you will see the minotaur appear.

As Simon Sarris said, you are drawing the canvas too soon. What you'll need to do is either loop until the sprite is ready, or add a callback to your sprite that is called after it draws.

You already have a function attached to the image's onload event, you should be okay to do something similar for the whole sprite.