1
resposta

Não acontece nada na tela

Olá! Estou colocando o seguinte código, mas nada acontece na tela. Alguem pode me ajudar?

<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 circulo = function(x, y, raio) {
    c.strokeStyle = "blue";
    c.beginPath();
    c.arc(x, y, raio, 0, 2 * Math.PI);
    c.stroke();
};
x=1;
var desenha = function() {
    limpaTela();
    circulo(x, 100, 10);
    desenhaImagem(x, 200);

    x = x + 1;
};
</script>
1 resposta

Olá Renata,

Repare que você chama a função limpaTela() mas você não implementou ela.

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

Além disso, faltou essa linha no final do script que o que justamente chama a sua função desenha.

setInterval(desenha, 30);

Teste agora depois de arrumar esses detalhes.

Bons estudos!