Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Como colocar uma imagem estática no canvas

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?

2 respostas
solução!

Oi Geovane, Você não pode desenhar uma imagem de URL diretamente no Canvas. Você tem que criar um elemento/objeto de imagem para fazer isso e depois carregar a imagem(onload):

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

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

function desenhaImagem() {
    var imagem = new Image();
    imagem.src = "https://s.aolcdn.com/hss/storage/midas/b386937631a1f03665c1d57289070898/203417456/simpsons.jpg";
    imagem.onload = function() {
            c.drawImage(imagem,10,10);
    }
}

desenhaImagem();

</script>

Ajudei ?

Entendi. Obrigado Maison.