Esperando a que se cargue la imagen antes de dibujar

Al intentar agregar una imagen a un lienzo, es crucial asegurarse de que la imagen se cargue antes intentando dibujarlo. El problema que encontró en su código se debe a la naturaleza asincrónica de la carga de imágenes.

Para resolver este problema, debe agregar una función de devolución de llamada al evento de carga de la imagen. Esta función de devolución de llamada se ejecutará cuando la imagen haya terminado de cargarse, lo que garantiza que los datos de la imagen estén disponibles antes de intentar dibujarla.

El código corregido a continuación esperará a que la imagen se cargue antes de dibujarla en el lienzo. :

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