Méthode : CanvasRenderingContext2D.drawImage()

Affiche une image dans le canvas à l'emplacement (x, y)

Syntaxe
myContext.drawImage(image, x, y, [largeur, hauteur])

Compatible tous navigateurs

Oui

Description
Affiche l'image dans le canvas à l'emplacement (x, y).
Il existe d'autres paramètres pour redimensionner à la dimension [largeur, hauteur] et pour cropper l'image avant de l'afficher.

Exemple 1 : Affichage d'images dans un canvas

Code source

<canvas id="myCanvas" width="350" height="200" style="background-color:#fff"></canvas>
<script type="text/javascript">
var myCanvas=document.getElementById("myCanvas");
var myContext=myCanvas.getContext("2d");

var img1=new Image();
img1.src="media/logo-js.png";
img1.onload=function() {
console.log(img1.src+" chargée");
myContext.drawImage(img1, 50, 2);
};

var img2=new Image();
img2.src="media/logo-php.png";
img2.onload=function() {
console.log(img2.src+" chargée");
myContext.drawImage(img2, 140, 60);
myContext.drawImage(img2, 220, 10, 75, 56);
};
</script>

Résultat

Emulation de la console

Explication

Charge une image en mémoire et l'affiche dans le canvas.

Page en rapport
Le tutoriel sur le dessin avec canvas

Page mise à jour le 25/09/2017