Insertion d'une image dans un canevas

Dans cette page je vais vous montrer comment insérer une image matricielle dans un canevas.
Il peut s'agir d'une image déjà présente dans la page ou non.

Insertion dans le canevas d'une image de la page

L'image à insérer dans le canevas est déjà une image de la page (et l'unique d'ailleurs ...).

Image unique de la page ci-dessous:

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

Dimensions natives de l'image 900 par 600 donc un rapport de 1,5 entre largeur et hauteur.

La même image bitmap est insérée deux fois mais à des endroits différents et avec des dimensions différentes ; première fois avec sa taille d'origine et une deuxième fois avec une réduction (mais respect des proportions : 450 par 300).

Le code HTML

... <p>Image unique de la page : <img src ="../images/brune_nue.jpg" width ="15%"> <p>Ci-dessous le canevas avec cette image insérée deux fois : <canvas width ="900" height ="600" style="width: 100% ; height : auto;"> </canvas> ...

L'image "brune nue" existe déjà dans le DOM ! Donc inutile de le modifier ...

Le script correspondant

var image = document.querySelector('img'); // cibler image unique de la page 
window.onload =function()
{
	var canevas = document.querySelector('canvas'); 
	var contexte = canevas.getContext('2d');
	var X=canevas.width;
	var Y=canevas.height;
	contexte.drawImage(image,0,0) ; // insertion image en haut à gauche avec sa taille d'origine.
	contexte.drawImage(image,X/2,Y/2,X/2,Y/2) ; // insertion image dans le milieu du canevas avec réduction 
	
	// ici le script pour remplir le deuxième canevas : voir ci-dessous !
}
...

Si vous essayez d'appeler drawImage avant le chargement de la page il ne se passera rien !!!
Il faut donc appeler cette méthode sur chargement de la page.
La méthode doit donc être dans une fonction anonyme appelée lors du chargement de la page : window.onload =function()

L'image est insérée deux fois dans la zone de dessin mais à des positions différentes via une fonction qui est déclenchée dès que la page est chargée.
Pour les deux insertions on utilise la fonction drawImage avec cinq paramètres : instance objet Image, x, y (x et y étant les coordonnées de l'image dans le canevas), largeur et hauteur de l'image dans le canevas.
Les deux derniers paramètres de la méthode sont facultatifs ; dans ce cas l'image est insérée avec ses dimensions natives. C'est le cas de la première insertion (qui occupe donc tout le canevas).

Insertion d'images trouvées sur la toile

Rien n'interdit d'insérer des images trouvées sur la "toile".

Exemple

Ci-dessous le deuxième canevas de cette page avec insertion de deux minuscules images récupérées sur un tutoriel Canvas.

Le code HTML

<canvas width ="900" height ="600" style= "width: 80% ; height : auto; background: linear-gradient(to bottom, black,navy,blue); box-shadow : 5px 5px 5px gray; border-radius : 5%; "> </canvas>

La balise Canvas est un élément du DOM-HTML donc on peut lui appliquer toutes les propriétés CSS relatives aux boites HTML !
Ici la boite Canvas est remplie avec un superbe dégradé linéaire CSS et dispose d'un ombrage et d'angles arrondis.

Le script correspondant

	// créer deux objets de type image
	var lune =new Image();
	var terre = new Image();
	lune.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';	
	terre.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
	window.onload =function()
	{
		// ici le script pour remplir premier canevas
	...
	
	// ci-dessous script pour remplir deuxième canevas
	var canevas2 = document.querySelectorAll('canvas')[1]; 
	var contexte2 = canevas2.getContext('2d');
	var X2 = canevas2.width;
	var Y2 = canevas2.height;
	contexte2.drawImage(terre,0,0,200,200) ; 
	contexte2.drawImage(lune,X2/2,Y2/2,50,50) ; 
	}

Comme ces deux images ne sont pas dans le DOM ! Il faut les ajouter via JavaScript : créer de nouveaux objets de type Image puis préciser la source de chaque nouvelle image.
Les deux images après avoir été ajoutées au DOM sont insérées dans le canevas avec agrandissement (d'où le flou) en haut à gauche pour la terre et au milieu pour la lune.
Retour menu