Canvas image animations

In this example I’m using Canvas to replace Flash as a means to display and animate a pseudo 3D phone.

I create an image element for each frame of the animation and apply a handler for it’s load event. As each image loads it is added to the list of frames, and if it’s the final image we’re waiting for then the animation is begun.

To animate I draw the image onto the canvas to create the frame, each frame we show replaces the previous content with another stored image.

I was surprised how well this worked, it’s not a particularly efficient method but it ran well in the latest browsers when I tested it. Even when using <a href=”http://code.google.com/p/explorercanvas/”>Excanvas</a> to provide support for IE it ran at full speed.

The only disappointment was it’s performance on the iPhone. I’d hoped that Canvas would replace Flash on the iPhone but it rendered the images very slowly. This could have been from the additional scaling performed by Safari on the iPhone, when in landscape view it rendered quicker than in portrait.

<a href=”http://www.looseideas.co.uk/sandbox/canvasLoading/”>View the Canvas image animation demo</a>.

The phone, by the way, is a <a href=”http://worldwide.blackberry.com/blackberrystorm/”>BlackBerry Storm</a>.

Filed under: Uncategorised