Dúvida no Ex. 3 da Aula 4 - Movendo elementos: animações simples

Vania,

Não está faltando você declarar as variáveis tela e c não?

<script>
  var tela = document.getElementById("tela");
  var c = tela.getContext("2d");

  // insira aqui o seu código
</script>

Inseri, mas continua sem funcionar, podem me ajudar. Por favor.

<script>

var tela = document.getElementById("tela");
var c = tela.getContext("2d");

var imagem = new Image();
imagem.src =  "563205_3534205926192_1612092937_n.jpg";

var desenhaImagem = function(x, y) {
    c.drawImage(imagem, x, y)
};

var desenha = function() {
    limpaTela();
    circulo(x, 100, 10);
    desenhaImagem(x, 200);
    x = x + 1;
};
</script>

Vania,

Essa imagem que vocẽ está usando para animação está na mesma pasta onde está o seu arquivo HTML? Se não estiver, não funciona.

Qualquer coisa, tente usar a imagem de teste que é usada na explicação:

http://www.caelum.com.br/imagens/instrutores/fotos/paulo-silveira-90.jpg

O código ficaria:

<canvas id="tela" width="600" height="400"></canvas>

<script>
var tela = document.getElementById("tela");
var c = tela.getContext("2d");

var imagem = new Image();
imagem.src = "http://www.caelum.com.br/imagens/instrutores/fotos/paulo-silveira-90.jpg";

var desenhaImagem = function(x, y) {
    c.drawImage(imagem, x, y)
};

var limpaTela = function() {
    c.clearRect(0, 0, 600, 400);
};

var x = 1;

var desenha = function() {
    limpaTela();
    desenhaImagem(x, 100);
    x = x + 1;
};

setInterval(desenha, 30);
</script>

Olá Arthur!!!

A imagem estava na mesma pasta, mas eu consegui descobrir o erro e deu certo. Obrigada.