La méthode CanvasRenderingContext2D.drawImage() de l'API 2D des Canvas instaure différentes manières de dessiner des images dans les balises canvas.
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);
imagedxx dans le canvas de destination où placer le coin supérieur gauche de l'image source.dyy dans le canvas de destination où placer le coin supérieur gauche de l'image source.dLargeurimage 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.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.sxx du bord en haut à gauche de la partie de l'image source à dessiner dans le contexte du canvas.syy du bord en haut à gauche de la partie de l'image source à dessiner dans le contexte du canvas.sLargeursx, 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.sHauteursy.INDEX_SIZE_ERRINVALID_STATE_ERRTYPE_MISMATCH_ERRdrawImageCeci est un extrait de code utilisant la méthode drawImage :
<canvas id="canvas"></canvas>
<img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg"
width="300" height="227">
</div>
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:
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <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);
{{ EmbedLiveSample('Playable_code', 700, 360) }}
| Spécification | Statut | Commentaire |
|---|---|---|
| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-drawimage", "CanvasRenderingContext2D.drawImage")}} | {{Spec2('HTML WHATWG')}} |
{{Compat("api.CanvasRenderingContext2D.drawImage")}}
sLargeur et sHauteur a été ajouté à Gecko 5.0 {{geckoRelease("5.0")}}.drawImage() gère les arguments négatifs, conformément à la spécification, en inversant ces valeurs par rapport aux axes.null ou undefined en appellant drawImage() correctement retournera une exception TYPE_MISMATCH_ERR à partir de {{geckoRelease("5.0")}}.