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:

Desenhar uma imagem na tela:
JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("tulip"); ctx.drawImage(img, 10, 10);
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:
JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("tulip"); ctx.drawImage(img,10,10,240,160);
Exemplo 3
Recorte a imagem e posicione a parte recortada na área de desenho:
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);
Exemplo 4
Vídeo a ser usado (pressione o botão de reprodução para começar o demo):
Área de desenho:
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);
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>.