O exercício usa o código em que a imagem se movimenta da esquerda para direita. Porém quis tentar apenas colocar a imagem de forma estática no canvas. Não consegui. Tentei de três formas. Assim:
<canvas id="tela" width="600" height="400"></canvas>
<script>
function desenhaImagem() {
c.drawImage(imagem,10,10);
}
var tela = document.getElementById("tela");
var c = tela.getContext("2d");
desenhaImagem();
var imagem = new Image();
imagem.src = "https://s.aolcdn.com/hss/storage/midas/b386937631a1f03665c1d57289070898/203417456/simpsons.jpg";
</script>
Assim:
<canvas id="tela" width="600" height="400"></canvas>
<script>
var tela = document.getElementById("tela");
var c = tela.getContext("2d");
c.drawImage(imagem,10,10);
var imagem = new Image();
imagem.src = "https://s.aolcdn.com/hss/storage/midas/b386937631a1f03665c1d57289070898/203417456/simpsons.jpg";
</script>
E assim:
function mostraImagem() {
var tela = document.getElementById("tela");
var c = tela.getContext("2d");
var imagem = new Image();
imagem.src = "https://s.aolcdn.com/hss/storage/midas/b386937631a1f03665c1d57289070898/203417456/simpsons.jpg";
c.drawImage(imagem, 10, 10);
}
Qual é o meu erro?