Tutoriel Canvas - sommaire

Insertion d'images dans le canevas

Il est bien sûr possible d'insérer des images existantes avec leur taille d'origine ou réduites dans un canevas.

Insertion dans le canevas d'images faisant déjà partie du DOM de la page

Comme vous le voyez ci-dessus, l'image qui est destinée à être insérée dans le canevas apparait déjà mais en miniauture dans la page. Donc elle a déjà été chargée.

Ci-dessous le canevas avec cette image insérée deux fois dans le canevas.

Le code HTML

L'image "foret.jpg" fait 600 par 450 ; dimensions qui correspondent au repère cartésien du canevas.
Cette image fait fonction de "background" de la 'toile'.

Le code JS

...
	var image = document.getElementById('foret'); // cibler l'image du DOM
	var canevas = document.querySelector('#canevas1'); 
	var contexte = canevas.getContext('2d');
	var X =canevas.width;
	var Y =canevas.height;
	 	 
	 // insertion de l'image dans le coin bas droit du canevas
	contexte.drawImage(image,X/2,Y/2,X/2,Y/2) ;
	// ajout d'une légende 
	contexte.fillStyle = 'red';
	contexte.textAlign ='center'; 
	contexte.textBaseline = 'middle'; 
	contexte.font = " bold normal 40px arial" ; 
	contexte.fillText('Page réservée aux adultes', X/2, Y/3) ; 
...

Pour insérer une image il faut utiliser la méthode drawImage avec trois paramètres si insertion avec sa taille d'origine ; avec cinq paramètres si insertion en réduction.
Syntaxe : drawImage(image,x,y [width, height])
x et y étant les coordonnées du coin haut gauche de l'image dans le canevas.

Insertion dans un canevas d'images qui ne sont pas dans le DOM

Si les images à insérer dans le canevas n'a pas encore été chargée, la technique d'insertion est un peu plus lourde ...
Avant d'insérer l'image il faut créer un nouvel objet de type Image puis l'insérer sur chargement.
Ci-dessous une 'toile' avec insertion de deux images qui ne faisaient pas encore partie du DOM.

Le code HTML

La fonction JS (extrait)

...
	var lune =new Image();
	var terre = new Image();
	lune.src = '../images/lune.gif' ;
	terre.src = '../images/terre.gif'; 
	
	var canevas = document.querySelector("#canevas2");
	var contexte = canevas.getContext('2d');
	// dessin des images après leur chargement
	lune.onload =function()
		{ contexte.drawImage(lune,10,10,50,50) ; }
	terre.onload = function()
		{contexte.drawImage(terre,300,300,200,200) ;}
...

Il faut créer deux nouveaux objets de type image puis les insérer sur chargement.

Astuce HTML

Plutôt que charger les images via le script, vous pouvez les charger via le HTML sans que pour autant elles apparaissent dans la page ; il suffit d'appliquer aux balises IMG la propriété display : none

Exemple

Le code HTML

Notez que chaque balise IMG a l'attribut ID.

Le script

Le script est beaucoup plus simple que le précédent car j'ai chargé les images via HTML.
Dans le canevas image est insérée avec sa taille d'origine puisque les paramètres width & height sont omis.
La deuxième image est déformée. En effet sa taille d'origine est 600 par 700 donc un ratio de 0.9. Or ici je fixe la largeur à X/2 donc 450 et la hauteur à Y/2 donc 250 donc un ration de 1.8. J'aurais du fixer la hauteur à 400.

La méthode drawImage() manque de souplesse par rapport à l'élément IMAGE du format SVG. Avec l'élément IMAGE du format SVG on précise la largeur OU la hauteur d'affichage et l'image s'insère réduite mais avec respect des proportions.
On ne peut pas faire la même chose avec la méthode drawImage() de Canvas qui exige 3 ou 5 arguments mais pas 4 !

Insertion d'images réduites sans déformation

Dans ce script je vous montre l'astuce programmatique pour insérer des images réduites mais sans déformation.

Le code correspondant

La balise canvas définit un repère de 300 par 450 et est identifié "canevas4".

La première image fait 300 par 200, la deuxième image fait 400 par 600.

La fonction

function script4()
{
	var canevas = document.querySelector("#canevas4"); 
	var contexte = canevas.getContext('2d');
	var X = canevas.width;
	var Y = canevas.height;

	var blonde = new Image(); 
	blonde.src ="../images/bikini13.jpg"; 
	blonde.onload =function()
	{
		largeur =blonde.width; 
		hauteur =blonde.height; 
		ratio = hauteur /largeur; 
		largeur_fixee = X/2; 
		hauteur_fixee = largeur_fixee * ratio; 
		console.log(largeur); 
		console.log(hauteur);
		console.log(ratio); 
		contexte.drawImage(blonde,0,0,largeur_fixee,hauteur_fixee); 
	}
	var black = new Image(); 
	black.src ="../images/noire_bikini.jpg" ; 
	black.onload =function()
	{
		...
	} // fin fonction anonyme
} // fin script4
script4(); 

Pour chaque image à insérer avec réduction, le script calcule le ratio hauteur/largeur dans l'image originale.
Puis on applique ce ratio à la largeur fixée pour obtenir la largeur d'affichage. Donc l'image insérée est réduite mais les proportions sont respectées.

Créer des objets à partir d'images

Exemple

Ci-dessous une document HTML contenant une 'toile'

Actualisez la page pour lancer / relancer l'animation

Le code HTML de ce document

Les images à insérer dans le canevas sont déjà chargées.
La 'toile' a pour fond une superbe image.

Le script du document

var canevas = document.getElementById("canevas");
var contexte = canevas.getContext('2d');
var X = canevas.width;
var Y = canevas.height;
var delta = 5; 
var fusee_image = document.getElementById("fusee");
var planete_image = document.getElementById("planete");
	
const fusee = 
{
  x: 10,
  y: 10,
  w :80,
  h :160,
  dessin: function () 
  {
    contexte.drawImage(fusee_image,this.x, this.y ,this.w, this.h)
  }, 
}; // fin définition objet fusee

const planete = 
{
  x: X-100,
  y: Y-100,
  w : 110,
  h : 80,
  dessin: function () 
  {
    contexte.drawImage(planete_image,this.x, this.y ,this.w, this.h)
  }, 
}; // fin définition objet planete

fusee.dessin();
planete.dessin(); 

// fin de la partie statique

// animation des objets 
var compteur =0; 
var stop = setInterval(deplacement,300); 
if (compteur < 101) compteur+=1;
else clearInterval(stop);

function deplacement()
{
	contexte.clearRect(0,0,X,Y);
	fusee.x +=delta;
	fusee.y +=delta;
	planete.x -=delta;
	planete.y -=delta;
	fusee.dessin(); 
	planete.dessin();  
}

Il s'agit d'une animation.
Pour le moment, essayez de comprendre le code jusqu'à "fin de la partie statique".
Concernant la partie "animation des objets" j'aurai l'occasion d'y revenir.