CanvasRenderingContext2D.drawImage()
La méthode CanvasRenderingContext2D
.drawImage()
de l'API 2D des Canvas instaure différentes manières de dessiner des images dans les balises canvas.
Syntaxe
void ctx.drawImage(image, dx, dy); void ctx.drawImage(image, dx, dy, dLargeur, dHauteur); void ctx.drawImage(image, sx, sy, sLargeur, sHauteur, dx, dy, dLargeur, dHauteur);
Paramètres
image
- Un élément à dessiner dans le contexte. La spécification autorise toute source d'image canvas (
CanvasImageSource
), ainsi qu'uneHTMLImageElement
, uneHTMLVideoElement
, uneHTMLCanvasElement
ou uneImageBitmap
. dx
- La coordonnée
x
dans le canvas de destination où placer le coin supérieur gauche de l'image
source. dy
- La coordonnée
y
dans le canvas de destination où placer le coin supérieur gauche de l'image
source. dLargeur
- La largeur de l'
image
dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa largeur normale. - dHauteur
- La hauteur de l'
image
dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa hauteur normale. sx
- La coordonnée
x
du bord en haut à gauche de la partie de l'image
source à dessiner dans le contexte du canvas. sy
- La coordonnée
y
du bord en haut à gauche de la partie de l'image
source à dessiner dans le contexte du canvas. sLargeur
- La largeur de la partie de l'image source à dessiner dans le contexte. Si ce n'est pas spécifié, cet argument prend la valeur de la largeur de l'image moins
sx
, autrement dit l'image dessinée dans le contexte sera la partie de l'image d'origine à partir du point s de coordonnées (sx
;sy
) et jusqu'au bord en bas à droite. sHauteur
- La hauteur de la partie de l'image source à dessiner dans le contexte. De la même manière que pour sLargeur, si aucune valeur n'est donnée cet argument prendra la valeur de la hauteur de l'image moins
sy
.
Exceptions
INDEX_SIZE_ERR
- Si la balise canvas ou la largeur ou hauteur du rectangle source vaut zero ou moins.
INVALID_STATE_ERR
- L'image reçue n'en est pas une.
TYPE_MISMATCH_ERR
- L'image reçue n'est pas supportée.
Exemples
Utiliser la méthode drawImage
Ceci est un extrait de code utilisant la méthode drawImage
:
HTML
<canvas id="canvas"></canvas>
<img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg"
width="300" height="227">
</div>
JavaScript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var image = document.getElementById("source");
ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
Éditez le code suivant pour voir les changements en direct dans la balise canvas:
Spécifications
Spécification | Statut | Commentaire |
---|---|---|
HTML Living Standard La définition de 'CanvasRenderingContext2D.drawImage' dans cette spécification. |
Standard évolutif |
Compatibilité des navigateurs
Nous convertissons les données de compatibilité dans un format JSON.
Ce tableau de compatibilité utilise encore l'ancien format
car nous n'avons pas encore converti les données qu'il contient.
Vous pouvez nous aider en contribuant !
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | (Oui) | (Oui) | (Oui) | (Oui) | (Oui) |
format ImageBitmap |
? | 42 (42) | ? | ? | ? |
Feature | Android | Chrome pour Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | (Oui) | (Oui) | (Oui) | (Oui) | (Oui) | (Oui) |
format ImageBitmap |
? | ? | 42.0 (42) | ? | ? | ? |
Notes concernant la compatibilité
- Un support pour l'inversion de l'image pour les valeurs négatives pour
sLargeur
etsHauteur
a été ajouté à Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2). - A partir de (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2)
drawImage()
gère les arguments négatifs, conformément à la spécification, en inversant ces valeurs par rapport aux axes. - Spécifier une image
null
ouundefined
en appellantdrawImage()
correctement retournera une exceptionTYPE_MISMATCH_ERR
à partir de (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2). - Prior to Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4), Firefox ajoute une exception si une des coordonnées est nulle ou négative. Selon la spécification, cela ne durera pas.
- Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6) supporte désormais correctement le CORS pour dessiner des images de domaines étrangers sans corrompre le canvas.
- Gecko 11.0 (Firefox 11.0 / Thunderbird 11.0 / SeaMonkey 2.8) permet désormais de dessiner les images SVG dans le canvas sans corrompre le canevas.
Notes
- drawImage() ne fonctionne correctement avec
HTMLVideoElement
que siHTMLMediaElement.readyState
est supérieur à 1. (i.e, Chercher l'événement renvoyé après avoir mis la propriété currentTime)
Voir aussi
- L'interface qui la définit,
CanvasRenderingContext2D
.