Método drawImage() da tela HTML

Imagem para usar:

O grito

Exemplo

Desenhe a imagem na tela:

JavaScript:

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

Suporte ao navegador

Os números na tabela especificam a primeira versão do navegador que oferece suporte total ao método.

Method
drawImage()	Yes	9.0	Yes	Yes	Yes

Definição e uso

O método drawImage() desenha uma imagem, tela ou vídeo na tela.

O método drawImage() também pode desenhar partes de uma imagem e/ou aumentar/reduzir o tamanho da imagem.

Nota: Você não pode chamar o método drawImage() antes que a imagem seja carregada. Para garantir que a imagem foi carregada, você pode chamar drawImage() de window.onload() ou de document.getElementById(" imageID ").onload.

Sintaxe JavaScript

Posicione a imagem na tela:

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

Posicione a imagem na tela e especifique a largura e a altura da imagem:

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

Recorte a imagem e posicione a parte recortada na tela:

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

Valores de parâmetro

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)

Mais exemplos

Exemplo

Posicione a imagem na tela e especifique a largura e a altura da imagem:

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

Exemplo

Recorte a imagem e posicione a parte recortada na tela:

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