Ожидание загрузки изображения перед рисованием

При попытке добавить изображение на холст крайне важно убедиться, что изображение загружено перед рисованием пытаюсь это нарисовать. Проблема, с которой вы столкнулись в своем коде, связана с асинхронным характером загрузки изображения.

Чтобы решить эту проблему, вам необходимо добавить функцию обратного вызова в событие загрузки изображения. Эта функция обратного вызова будет выполнена после завершения загрузки изображения, гарантируя, что данные изображения доступны, прежде чем вы попытаетесь его нарисовать.

Исправленный код ниже будет ждать загрузки изображения, прежде чем рисовать его на холсте. :

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