Attendre le chargement de l'image avant de dessiner

Lorsque vous essayez d'ajouter une image à un canevas, il est crucial de vous assurer que l'image est chargée avant essayer de le dessiner. Le problème que vous avez rencontré dans votre code est dû à la nature asynchrone du chargement de l'image.

Pour résoudre ce problème, vous devez ajouter une fonction de rappel à l'événement onload de l'image. Cette fonction de rappel sera exécutée une fois le chargement de l'image terminé, garantissant que les données de l'image sont disponibles avant d'essayer de la dessiner.

Le code corrigé ci-dessous attendra que l'image se charge avant de la dessiner sur le canevas. :

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