CODEWITHSUNDEEP
htmlcanvasgif
Namratha
Namratha

Reputation: 111

How to play gif inside canvas in HTML5

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

Upvotes: 5

Views: 30771

Answers (3)

forresto
forresto

Reputation: 12387

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

Upvotes: 4

Alex Morales
Alex Morales

Reputation: 1191

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.

Upvotes: 1

rezoner
rezoner

Reputation: 1967

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.

Upvotes: 7

Related Questions