Método HTML canvas drawImage()

Imagen a utilizar:

El grito

Ejemplo

Dibuja la imagen en el lienzo:

JavaScript:

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

Compatibilidad con navegador

Los números en la tabla especifican la primera versión del navegador que soporta totalmente este método.

Method
drawImage()	Yes	9.0	Yes	Yes	Yes

Definición y uso

El método drawImage() dibuja una imagen, lienzo o video en el lienzo.

El método drawImage() también puede dibujar partes de una imagen y/o aumentar/reducir el tamaño de la imagen.

Nota: no puede llamar al método drawImage() antes de que se haya cargado la imagen. Para asegurarse de que la imagen se haya cargado, puede llamar a drawImage() desde window.onload() o desde document.getElementById(" imageID ").onload.

Sintaxis JavaScript

Coloque la imagen en el lienzo:

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

Coloque la imagen en el lienzo y especifique el ancho y el alto de la imagen:

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

Recorta la imagen y coloca la parte recortada en el lienzo:

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

Valores paramétricos

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)

Más ejemplos

Ejemplo

Coloque la imagen en el lienzo y especifique el ancho y el alto de la imagen:

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

Ejemplo

Recorta la imagen y coloca la parte recortada en el lienzo:

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