Meu código funciona, mas queria fazer com que o GIF rodasse a animação própria também. Como fazer?
<!doctype html>
<head>
<meta charset="UTF-8"/>
</head>
<html>
<body>
<canvas id="tela" width="600" height="400"></canvas>
<script>
var tela = document.getElementById("tela");
var c = tela.getContext("2d");
var x = -100;
var img = new Image();
img.src = "http://www.netanimations.net/Moving-picture-puffing-chugging-locomotive-animated-gif.gif";
var desenhaImagem = function() {
limpaTela();
c.drawImage(img, x, 200)
x = x + 10;
};
var limpaTela = function(){
c.clearRect(0,0,600,400);
}
setInterval(desenhaImagem, 30);
</script>
</body>
</html>
