Drawing the first frame of an animated GIF on HTML5 canvas

Question

When I draw a gif image into a canvas element before it finishes loading the entire gif, it is just a white area. But if I do

window.stop() 

Before it ends, it draws a gif in the element. The problem is that stopping the entire page stops all the gifs, not just the specific one that I want to copy onto the canvas. How can I draw what is currently loaded in the gif into the canvas element before it finishes loading the entire gif. I thought about putting it in an iframe and stopping the iframe or some other trick, but I will also like some ideas or solutions that you guys have to offer.

edit: Is there a way to determine how many of the gifs were loaded as a percentage using javascript? So that I can know that at least the first frame is loaded?

Answer 1

How can I draw what is currently loaded in a gif into a canvas element before it finishes loading the entire gif

You can not.

This is not a mistake in itself. The specification dictates that:

If the image argument is an HTMLImageElement object that is not fully decoded ... then the implementation should return without drawing.

The reason it works when you do stop() is technically declaring a fully accessible image. Or, more precisely, in plain English, "as available to receive it."

It’s best to assume that you want this feature to be to make many small images from gif frames and use them when loading. Any other solution (e.g. splitting gifs on the fly) would require first loading the entire gifs that you seem to consider unacceptable.