Aguardando o carregamento da imagem antes de desenhar

Ao tentar adicionar uma imagem a uma tela, é crucial garantir que a imagem seja carregada antes tentando desenhá-lo. O problema que você encontrou em seu código é devido à natureza assíncrona do carregamento da imagem.

Para resolver esse problema, você precisa adicionar uma função de retorno de chamada ao evento onload da imagem. Esta função de retorno de chamada será executada quando a imagem terminar de carregar, garantindo que os dados da imagem estejam disponíveis antes de você tentar desenhá-la.

O código corrigido abaixo aguardará o carregamento da imagem antes de desenhá-la na tela :

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);
  };
}