How to play gif inside canvas in HTML5

Question

I want to play animated GIF file inside a HTML Canvas. I have used the code below but it is not working.

What is wrong with the code?

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';
}

Is that image path correct? You should avoid using spaces in your url's but if you have to you need to replace them with '%20'. — Alex Morales, Feb 14 '12 at 14:48
Look at the answer I posted. You should be able to do it that way. — Alex Morales, Feb 15 '12 at 12:05
Does this answer your question? [Animated GIF in HTML5 canvas](https://stackoverflow.com/questions/3062229/animated-gif-in-html5-canvas) — ggorlen, Jan 04 '21 at 19:26

score 7 · Answer 1 · answered Feb 14 '12 at 14:39

7

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.

answered Feb 14 '12 at 14:39

rezoner

1,907
13
16

score 4 · Answer 2 · answered Oct 03 '12 at 23:29

4

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

answered Oct 03 '12 at 23:29

forresto

12,078
7
45
64

3

Update : the most relevant is to use the fork from buzzfeed : https://github.com/buzzfeed/libgif-js. They fork the project @forresto quoted, and added some basic functions. – Ser Dec 19 '15 at 15:31

score 1 · Answer 3 · answered Feb 14 '12 at 15:07

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.

How to play gif inside canvas in HTML5

3 Answers3

Linked