Méthode drawImage()
Image à utiliser :
Exemple
Dessinez l'image sur le canevas :
JavaScript :
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const img = document.getElementById("scream");
ctx.drawImage(img, 10, 10); Description
La méthode drawImage() permet de dessiner une image, un canevas ou une vidéo sur le canevas.
Elle peut également dessiner des parties d'une image et/ou modifier la taille de l'image.
Syntaxe
Positionnez l'image sur le canevas :
| context .drawImage( img, x, y ) |
Positionnez l'image sur le canevas et spécifiez la largeur et la hauteur de l'image :
| context .drawImage( img, x, y, width, height ) |
Découpez l'image et positionnez la partie découpée sur le canevas :
| context .drawImage( img, sx, sy, swidth, sheight, x, y, width, height ) |
Valeurs des paramètres
| Param | Description | Jouez-le |
|---|---|---|
| img | Spécifie l'image, le canevas ou l'élément vidéo à utiliser | |
| sx | Optionnel. La coordonnée x où commencer à découper | |
| sy | Optionnel. La coordonnée y où commencer à découper | |
| swidth | Optionnel. La largeur de l'image découpée | |
| sheight | Optionnel. La hauteur de l'image découpée | |
| x | La coordonnée x où placer l'image sur le canevas | |
| y | La coordonnée y où placer l'image sur le canevas | |
| width | Optionnel. La largeur de l'image à utiliser (pour étirer ou réduire l'image) | |
| height | Optionnel. La hauteur de l'image à utiliser (pour étirer ou réduire l'image) |
Valeur de retour
| AUCUN |
Plus d'exemples
Exemple
Positionnez l'image sur le canevas et spécifiez la largeur et la hauteur de l'image :
JavaScript :
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const img = document.getElementById("scream");
ctx.drawImage(img, 10, 10, 150, 180); Exemple
Découpez l'image et positionnez la partie découpée sur le canevas :
JavaScript :
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const img = document.getElementById("scream");
ctx.drawImage(img, 90, 130, 50, 60, 10, 10, 50, 60); Exemple
Vidéo à utiliser (appuyez sur Play pour commencer la démonstration) :
Canevas :
JavaScript (le code dessine la trame actuelle de la vidéo toutes les 20 millisecondes) :
const video = document.getElementById("video1");
const canvas = document.getElementById("myCanvas");
ctx = canvas.getContext('2d');
video.addEventListener('play', function() {var i = window.setInterval(function() {ctx.drawImage(video, 5, 5, 260, 125)}, 20);}, false);
video.addEventListener('pause', function() {window.clearInterval(i);}, false);
video.addEventListener('ended', function() {clearInterval(i);}, false); Support des navigateurs
L'élément <canvas> est une norme HTML5 (2014).
La méthode drawImage() est prise en charge dans tous les navigateurs modernes :
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Oui | Oui | Oui | Oui | Oui | 9-11 |