Método drawImage() do canvas HTML

Manual de referência do HTML5 Canvas

Definição e uso

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

drawImage() O método também pode desenhar partes específicas da imagem e/ou aumentar ou diminuir o tamanho da imagem.

Exemplo

Exemplo 1

Imagem a ser usada:

tulipa

Desenhar a imagem no topo do painel:

Seu navegador não suporta a tag canvas do HTML5.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10);

Experimente você mesmo

Dica:Mais exemplos estão disponíveis na parte inferior da página.

Sintaxe

Sintaxe JavaScript 1

Posicionar a imagem no painel:

context.drawImage(img,x,y);

Sintaxe JavaScript 2

Posicionar a imagem no painel e definir suas dimensões de largura e altura:

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

Sintaxe JavaScript 3

Cortar a imagem e posicionar a parte cortada no painel:

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

Valor do parâmetro

Parâmetro Descrição
img Define a imagem, o painel ou o vídeo a ser usado.
sx Opcional. Posição x inicial do corte.
sy Opcional. Posição y inicial do corte.
swidth Opcional. Largura da imagem cortada.
sheight Opcional. Altura da imagem cortada.
x Posição x da imagem no painel.
y Posição y da imagem no painel.
width Opcional. Largura da imagem a ser usada (esticar ou encolher a imagem).
height Opcional. Altura da imagem a ser usada (esticar ou encolher a imagem).

Mais exemplos

Exemplo 2

Posicionar a imagem no painel e definir suas dimensões de largura e altura:

Seu navegador não suporta a tag canvas do HTML5.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10,240,160);

Experimente você mesmo

Exemplo 3

Cortar a imagem e posicionar a parte cortada no painel:

Seu navegador não suporta a tag canvas do HTML5.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,90,130,90,80,20,20,90,80);

Experimente você mesmo

Exemplo 4

Vídeo a ser usado (pressione o botão de reprodução para começar o demo):

Painel:

Seu navegador não suporta a tag canvas do HTML5.

JavaScript (a cada 20 milissegundos, o código desenha o frame atual do vídeo):

var v=document.getElementById("video1");
var c=document.getElementById("myCanvas");
ctx=c.getContext('2d');
v.addEventListener('play',function() {var i=window.setInterval(function()} 
{ctx.drawImage(v,0,0,270,135)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);

Experimente você mesmo

Suporte do navegador

Os números na tabela indicam a versão do navegador que suportou a propriedade pela primeira vez.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Observação:O Internet Explorer 8 e versões anteriores não suportam o elemento <canvas>.

Manual de referência do HTML5 Canvas