Warten auf das Laden des Bildes vor dem Zeichnen

Wenn Sie versuchen, ein Bild zu einer Leinwand hinzuzufügen, ist es wichtig sicherzustellen, dass das Bild vorher geladen wird versuche es zu zeichnen. Das Problem, auf das Sie in Ihrem Code gestoßen sind, ist auf die asynchrone Natur des Bildladens zurückzuführen.

Um dieses Problem zu beheben, müssen Sie dem Onload-Ereignis des Bildes eine Rückruffunktion hinzufügen. Diese Rückruffunktion wird ausgeführt, wenn das Bild vollständig geladen ist, um sicherzustellen, dass die Bilddaten verfügbar sind, bevor Sie versuchen, es zu zeichnen.

Der unten korrigierte Code wartet, bis das Bild geladen ist, bevor er es auf die Leinwand zeichnet :

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