HTML-canvas drawImage() Methode

Afbeelding om te gebruiken:

De Schreeuw

Voorbeeld

Teken de afbeelding op het canvas:

javascript:

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

Browserondersteuning

De getallen in de tabel geven de eerste browserversie aan die de methode volledig ondersteunt.

Method
drawImage()	Yes	9.0	Yes	Yes	Yes

Definitie en gebruik

De methode drawImage() tekent een afbeelding, canvas of video op het canvas.

De methode drawImage() kan ook delen van een afbeelding tekenen en/of de afbeeldingsgrootte vergroten/verkleinen.

Opmerking: u kunt de methode drawImage() niet aanroepen voordat de afbeelding is geladen. Om ervoor te zorgen dat de afbeelding is geladen, kunt u drawImage() aanroepen vanuit window.onload() of vanuit document.getElementById(" imageID ").onload.

JavaScript-syntaxis

Plaats de afbeelding op het canvas:

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

Plaats de afbeelding op het canvas en specificeer de breedte en hoogte van de afbeelding:

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

Knip de afbeelding uit en plaats het uitgeknipte deel op het canvas:

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

Parameterwaarden

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)

Meer voorbeelden

Voorbeeld

Plaats de afbeelding op het canvas en specificeer de breedte en hoogte van de afbeelding:

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

Voorbeeld

Knip de afbeelding uit en plaats het uitgeknipte deel op het canvas:

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