Método drawImage() do Canvas

Definição e uso

drawImage() O método desenha imagens, telas ou vídeos na tela.

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

Exemplo

Exemplo 1

Imagem a ser usada:

tulipa

Desenhar uma imagem na tela:

Seu navegador não suporta a tag HTML5 canvas.

JavaScript:

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

Experimente pessoalmente

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

Sintaxe

Sintaxe do JavaScript 1

Posicionar a imagem na tela:

context.drawImage(img,x,y);

Sintaxe do JavaScript 2

Posicionar a imagem na tela e definir suas dimensões:

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

Sintaxe do JavaScript 3

Cortar a imagem e posicionar a parte cortada na tela:

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

Valor do parâmetro

Parâmetro Descrição
img Defina a imagem, a área de desenho ou o vídeo a ser usado.
sx Opcional. Posição x de início do recorte.
sy Opcional. Posição y de início do recorte.
swidth Opcional. Largura da imagem recortada.
sheight Opcional. Altura da imagem recortada.
x Posição x da imagem na área de desenho.
y Posição y da imagem na área de desenho.
width Opcional. Largura da imagem a ser usada (estique ou reduza a imagem).
height Opcional. Altura da imagem a ser usada (estique ou reduza a imagem).

Mais exemplos

Exemplo 2

Posicione a imagem na área de desenho e defina a largura e altura da imagem:

Seu navegador não suporta a tag HTML5 canvas.

JavaScript:

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

Experimente pessoalmente

Exemplo 3

Recorte a imagem e posicione a parte recortada na área de desenho:

Seu navegador não suporta a tag HTML5 canvas.

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 pessoalmente

Exemplo 4

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

Área de desenho:

Seu navegador não suporta a tag HTML5 canvas.

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 pessoalmente

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

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