How to play gif inside canvas in HTML5

Question

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

var drawingCanvas = document.getElementById('myDrawingCanvas'); if(drawingCanvas.getContext) { var context = drawingCanvas.getContext('2d'); var imgObj = new Image(); imgObj.onload = function () { context.drawImage(imgObj, 0, 0, 1024, 600); } imgObj.src='HTML Images/Spell Bee/images/mainscreen.gif'; } 

Answer 1

You cannot, since canvas does not provide any methods for handling animated gifs. You have to split the gif into separate frames, and then create a spritesheet and animate it by copying the current frame.

Answer 2

In fact, you can decode GIFs using JavaScript and write frames to the canvas. Check out http://slbkbs.org/jsgif/

Answer 3

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 in when it is turned on. So, as the resonator says, you need to create a spritesheet and animate it with javascript.