http://ernestdelgado.com/public-tests/gifoncanvas/
<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Animated Gif on Canvas</title>
<style type="text/css" media="screen">
body { color: #222; font: 75% "Lucida Grande", "Trebuchet MS", Verdana, sans-serif; margin: 0 auto; 750px; }
img { border: 3px solid yellow; }
canvas { border: 3px solid red; }
.ex-group { border-bottom: 1px solid #ccc; padding-bottom: 15px; }
</style></head>
<body>
<div class="ex-group">
<img id="ex-animated-sprite-gif" src="iori.gif" style=" 50px; height: 50px;opacity:0;">
<canvas id="myCanvas" width="600" height="50" style=" 600px; height: 50px;"></canvas>
</div>
<script type="text/javascript" charset="utf-8">
(function() {
var dx = 0;
drawGif = {
draw: function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = document.getElementById("ex-animated-sprite-gif");
//if(dx >= 550){
this.clearCanvas("myCanvas");
// dx=0;
//}
// dx+=50;
context.drawImage(imageObj, dx, 0,50, 50);
},
clearCanvas: function(canvasEl) {
var cv = document.getElementById(canvasEl);
cv.getContext('2d').clearRect(0, 0, cv.width, cv.height);
}
}
})()
window.onload = (function() {
setInterval(function(){
drawGif.draw();
},150);
});
</script>
</body>
</html>