DrawImage на экземпляре в JavaScript

Question

Я не понимаю, почему метод drawImage не работает на экземпляре Canvas2D.

Но когда я помещаю его в метод setTimeout, он работает, почему?

function Canvas2D() {
  this._canvas = document.getElementById('screen');
  this._canvasContext = this._canvas.getContext('2d');
}

Canvas2D.prototype.clear = function() {
  this._canvasContext.clearRect(0, 0, this._canvas.width, this._canvas.height);
};

let Canvas = new Canvas2D();

let image = new Image();
image.src = './assets/sprites/spr_background.png';

// Doesn't work here
Canvas._canvasContext.drawImage(image, 33, 71);

setTimeout(() => {
  // When I put it here it works
  // Canvas._canvasContext.drawImage(image, 33, 71);
}, 1000);

Answer 1

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

image.onload = function(){
  Canvas._canvasContext.drawImage(image, 33, 71);
}

это должно работать, я думаю ...

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