How to play gif inside canvas in HTML5

Question

I want to play gif inside a canvas. i hav used the following code. bt it is not working. plz tel me wat is wrong in my code or any other way of doing it.

var         


        

Answer 1

You cannot as canvas doesn't provide any methods to deal with animated gifs. You should split gif into single frames then create a spritesheet and animate it copying current frame.

Answer 2

I found an article that answers your question. Basically, when you add an animated gif to a canvas element it displays the exact state the image is at when it's included. So, as rezoner says, you need to create a spritesheet and animate it using javascript.

Answer 3

You can actually decode the GIF with JavaScript and write the frames to canvas. Check http://slbkbs.org/jsgif/