Como adicionar uma imagem a uma tela

Na tela HTML, você pode aprimorar suas criações incorporando imagens. No entanto, encontrar dificuldades ao tentar fazer isso pode ser frustrante. Este artigo tem como objetivo orientar você durante o processo, discutindo um problema comum e fornecendo uma solução.

Problema: Apesar de ter uma fonte de imagem existente e nenhum erro de JavaScript, a imagem não é exibida no a tela.

Solução: É crucial garantir que a imagem esteja totalmente carregada antes de tentar desenhá-la na tela. Modifique seu código para incluir o ouvinte de evento onload na imagem, conforme mostrado abaixo:

var canvas = document.getElementById('viewport'),
context = canvas.getContext('2d');

make_base();

function make_base() {
  base_image = new Image();
  base_image.src = 'img/base.png';
  
  base_image.onload = function() {
    context.drawImage(base_image, 100, 100);
  };
}

Ao incorporar este ajuste simples, sua imagem agora aparecerá com sucesso na tela depois de carregada, permitindo que você aprimore seus designs com elementos visuais.