Méthode HTML canvas drawImage()

Image à utiliser :

Le cri

Exemple

Dessinez l'image sur la toile :

JavaScript :

window.onload = function() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("scream");
  ctx.drawImage(img, 10, 10);
};

Prise en charge du navigateur

Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la méthode.

Method
drawImage()	Yes	9.0	Yes	Yes	Yes

Définition et utilisation

La méthode drawImage() dessine une image, un canevas ou une vidéo sur le canevas.

La méthode drawImage() peut également dessiner des parties d'une image et/ou augmenter/réduire la taille de l'image.

Remarque : Vous ne pouvez pas appeler la méthode drawImage() avant que l'image ne soit chargée. Pour vous assurer que l'image a été chargée, vous pouvez appeler drawImage() depuis window.onload() ou depuis document.getElementById(" imageID ").onload.

Syntaxe JavaScript

Positionnez l'image sur la toile :

JavaScript syntax:	context.drawImage(img,x,y);

Positionnez l'image sur le canevas et spécifiez la largeur et la hauteur de l'image :

JavaScript syntax:	context.drawImage(img,x,y,width,height);

Découpez l'image et positionnez la partie découpée sur la toile :

JavaScript syntax:	context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

Valeurs des paramètres

Parameter	Description	Play it
img	Specifies the image, canvas, or video element to use
sx	Optional. The x coordinate where to start clipping
sy	Optional. The y coordinate where to start clipping
swidth	Optional. The width of the clipped image
sheight	Optional. The height of the clipped image
x	The x coordinate where to place the image on the canvas
y	The y coordinate where to place the image on the canvas
width	Optional. The width of the image to use (stretch or reduce the image)
height	Optional. The height of the image to use (stretch or reduce the image)

Plus d'exemples

Exemple

Positionnez l'image sur le canevas et spécifiez la largeur et la hauteur de l'image :

JavaScript :

window.onload = function() {
  var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
  var img = document.getElementById("scream");
  ctx.drawImage(img, 10, 10, 150, 180);
};

Exemple

Découpez l'image et positionnez la partie découpée sur la toile :

JavaScript :

window.onload = function() {
var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("scream");
  ctx.drawImage(img, 90, 130, 50, 60, 10, 10, 50, 60);
};