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

Olá Fabricio! O código ficaria assim:

<canvas id="tela" width ="600" height = "400"></canvas>
<script>
var tela = document.getElementById("tela");
var p = tela.getContext("2d");
var x = 0;
var imagem = new Image();
imagem.src = "http://www.caelum.com.br/imagens/instrutores/fotos/paulo-silveira-90.jpg";

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

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

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

setInterval(animacao, 30);


</script>

E como ele diz no exercício, é o mesmo que trabalhar com o circulo. Porém primeiramente você atribui uma imagem a variável:

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

Depois você utiliza a função desenhaImagem dada no exercicio para desenhar a imagem que você atribuiu a variável:

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

Por fim, você poe sua função dentro da função animacao e a chama para que a funcione. Lembrando sempre de atribuir o intervalo também :

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

setInterval(animacao, 30);

Espero que eu tenha ajudado. Bons Estudos!

Romário, Muito Obrigado !!

De nada Fabricio. Lembre-se de fechar esse forum caso sua dúvida foi solucionada. Se não foi ainda, só perguntar que to aqui pra ajudar e outras pessoas também.

Qual a diferença de c.drawImage para p.drawImage como fez no exemplo do Romário ?

Olá Flavio! A diferença é apenas o nome da variavel. Em c.drawImage a variavel é c e em p.drawImagea variavel é p. Só muda o nome.

Atá entendi achava que mudava alguma propriedade dentro da função .

Muito obrigado !!