gif animation with img object

Question

When caching an image before drawing it on canvas the image is loaded into an image/img object with "object = new Image()" and by setting .src attribute of this object to image location.

If cached image was a .gif animation and a <img> .src attribute was refered to it, then the whole animation would be rendered, which mean that the cache must contain the whole animation = all pictures in the animation.

But when drawing cached image on canvas, only a single image is drawed. So the question is, since we know the cached image contain the whole animation: how to address frame # number when using drawImage and how to get length of frames in animation?

Could it be fx. CanvasRenderingContext2D.drawImage(imageObject.item(frame_number), .... ?

Or could it be by using another object than image as cache, since according to drawImage specifications, the Image parameter can be: An image, canvas, or video element of the pattern to use

???

Answer 1

Hi HD,

Based on my research it seems that the HTML5 Canvas does not support animated gifs (or any other animated bitmap.) Some alternatives:

1) Develop the animation in vector graphics , then animate it on the canvas

2) Use a HTMLVideoElement instead of HTMLImageElement: http://dev.w3.org/html5/2dcontext/#images

3) Split the animated gif into frames, then animate it within canvas: http://www.brighthub.com/internet/web-development/articles/40515.aspx 

Please remember to click "Mark as Answer" on the post that helps you, and to click "Unmark as Answer" if a marked post does not actually answer your question. This can be beneficial to other community members reading the thread.

Regards,
Daniel
Microsoft Online Community Support

Answer 2

Thanks for taking time to reply.

But suggestion 1 and 3 are not satisfying: 1) because the .gif is a detailed picture; and 3) because that should not be nessecary though it is possible.

Suggestion 2 might work, but I haven't found how a gif can be displayed as such.

Answer 3

"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."

From: http://dev.w3.org/html5/2dcontext/#images

 

This is my own interpretation, but the spec does not appear to explicitly support animation with images. It seems the intent is to have the developer control the animation based on this sentence, as well as other parts of the spec.

 

 

Answer 4

"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."

From: http://dev.w3.org/html5/2dcontext/#images 

One of these days I am going to try your second suggestion. I do not think that the poster frame is a good source to use though and it is possibly not even possible, since there are no explanation to how to specify frame # number, but only the URL to a picture, so it doesn't really use the video.

But beneath your reference it also says "When the <var>image</var> argument is an HTMLVideoElement, then the frame at the current playback position must be used as the source image" and if that works it should provide a more stabile animation, since the duration between each frame rendered might vary, and it should then automatically pick the right one according to timeline.

Similar to the image object that is cached the video element also got a .src attribute that can be set. And after loading (caching) the video and running the method play, it should according to specifications render an animation when continuesly drawed on canvas. Question is just whether the video object will accept a gif animation?