Animated GIFs and Canvas

Just a quick test - pressing the button below will copy the animated GIF to the canvas. This behaves inconsistently across browsers.

In Chrome, this means the frame that is currently displayed in the GIF. In Firefox, it is poster image of the GIF (first frame, it seems).

Whilst Chrome seems to be much more useful, it is also not per spec. Here's the bug on Firefox and the bug request in Webkit with explanations why it shouldn't happen:

If this is an animated image, the ImageBitmap object's bitmap data must only be taken from the default image of the animation (the one that the format defines is to be used when animation is not supported or is disabled), or, if there is no such image, the first frame of the animation.

rocking a hedgehog

How can you make it work?

It seems the only way to make this work consistently across browsers is to split the image into its frames. jsGIF can do that for you.