The default bug view has changed. See this FAQ.

Drawing an animated image into canvas does not work




7 years ago
6 years ago


(Reporter: Jeremie, Unassigned)


Firefox Tracking Flags

(Not tracked)



(1 attachment)



7 years ago
User-Agent:       Mozilla/5.0 (X11; Linux x86_64; en-US; rv:2.0b2pre) Gecko/20100712 Minefield/4.0b2pre
Build Identifier: Mozilla/5.0 (X11; Linux x86_64; en-US; rv:2.0b2pre) Gecko/20100712 Minefield/4.0b2pre

With FF4, When you try to draw the frames of an animated image (GIF or APNG) into a canvas object by repeating the drawing operation with setInterval, only the first frame of the image is drawn.

With FF3.6 it works as expected : Mozilla/5.0 (X11; U; Linux i686 (x86_64); fr; rv: Gecko/20100625 Firefox/3.6.6


Reproducible: Always

Steps to Reproduce:
1. Open the test case

Actual Results:  
The image is well animated, but the canvas is not

Expected Results:  
Both image and canvas should be animated

It seems that this behavior has changed since 2009-09-13 (Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.9.3a1pre) Gecko/20090913 Minefield/3.7a1pre) with the build from

Comment 1

7 years ago
Created attachment 457169 [details]
Hmm, joe?
Component: Canvas: 2D → ImageLib
OS: Linux → All
QA Contact: canvas.2d → imagelib
Hardware: x86_64 → All
This is intended behavior - I added it for canvas spec compliance.

I'm open to adding a flag or something to get non-spec behavior if there's an important use-case. Then again, I'm not the canvas owner.
Huh, indeed the spec does say that:

> When the drawImage() method is passed an animated image as its image  argument, the user agent must use the poster frame of the animation, or, if there is no poster frame, the first frame of the animation.
> When the image argument is an HTMLVideoElement, then the frame at the current playback position must be used as the source image, and the source image's dimensions must be the intrinsic width and intrinsic height of the media resource (i.e. after any aspect-ratio correction has been applied).

That's a bit weird to me; not sure why animated images are treated differently than video.  What do the other browsers do?

Comment 5

7 years ago
I don't know if there's an important use case here. But in a web designer point of view this behavior is very hard to understand and I agree with Vladimir, the spec is weird here. The main problem to me here is : How is it possible to access the other frames of an animated image? How is it possible to apply some pixel operation on an entire animated image if it's only possible to access the first frame?

Regarding the current state of the spec, it seems that this bug should be mark as WONTFIX. But Do you have any idea if someone at Mozilla could push that use case to the W3C HTML Group?

FWIW Opera 10.60 follow the spec.
I thought the HTML5 spec had a revision log somewhere... would be interesting to look up why it says what it does.
(In reply to comment #6)
> I thought the HTML5 spec had a revision log somewhere... would be interesting
> to look up why it says what it does.

My guess is that it has something to do with things being deterministic enough to be spec-able. Given all the uncertainty about when the script executes, when the animation timer fires, etc, it seems like the only way to get consistent, definable behavior would be to specify a frame to paint. Once we're doing that, the first frame (or poster frame) seems like a good choice...
Wont fix per comment 5.
Last Resolved: 6 years ago
Resolution: --- → WONTFIX
You need to log in before you can comment on or make changes to this bug.