Comment ajouter une image à un canevas

Dans le canevas HTML, vous pouvez améliorer vos créations en incorporant des images. Cependant, rencontrer des difficultés en essayant d’y parvenir peut être frustrant. Cet article vise à vous guider tout au long du processus, en discutant d'un problème courant et en proposant une solution.

Problème : Malgré une source d'image existante et aucune erreur JavaScript, l'image ne s'affiche pas sur le canevas.

Solution : Il est crucial de s'assurer que l'image est entièrement chargée avant d'essayer de la dessiner sur le canevas. Modifiez votre code pour inclure l'écouteur d'événement onload à l'image, comme indiqué ci-dessous :

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

En incorporant ce simple ajustement, votre image apparaîtra désormais avec succès sur la toile une fois chargée, vous permettant d'améliorer vos créations avec des éléments visuels.