MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

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);

drawImage

Paramètres

image
Un élément à dessiner dans le contexte. La spécification autorise toute source d'image canvas (CanvasImageSource), ainsi qu'une HTMLImageElement, une HTMLVideoElement, une HTMLCanvasElement ou une ImageBitmap.
dx
La coordonnée x du bord en haut à gauche de l'image source.
dy
La coordonnée y du bord en haut à 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>
<div style="display:none;">
  <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:

Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div style="display:none;">
  <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227">
</div>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);</textarea>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var image = document.getElementById('source');
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

Spécifications

Spécification Statut Commentaire
WHATWG HTML Living Standard
La définition de 'CanvasRenderingContext2D.drawImage' dans cette spécification.
Standard évolutif  

Compatibilité des navigateurs

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 et sHauteur 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 ou undefined en appellant drawImage() correctement retournera une exception TYPE_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

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : Hell_Carlito, JNa0
 Dernière mise à jour par : Hell_Carlito,