Método putImageData() do canvas HTML

Manual de referência do Canvas HTML5

Definição e uso

putImageData() método coloca os dados de imagem (do objeto ImageData especificado) de volta na tela do canvas.

Dica:Veja também getImageData() método, que pode copiar os dados de pixels de um retângulo específico da tela do canvas.

Dica:Veja também createImageData() método, que pode criar um novo objeto ImageData vazio.

Exemplo

O código a seguir copia os dados de pixels de um retângulo específico da tela do canvas usando getImageData() e coloca os dados de imagem de volta no canvas usando putImageData():

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="verde";
ctx.fillRect(10,10,50,50);
function copiar()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}

Experimente pessoalmente

sintaxe

contexto.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);

valores dos parâmetros

parâmetros descrição
imgData Objeto ImageData a ser colocado de volta no canvas.
x Coordenada x no canto superior esquerdo do objeto ImageData, em pixels.
y Coordenada y no superior esquerda do objeto ImageData, em pixels.
dirtyX Opcional. O valor horizontal (x), em pixels, da posição onde a imagem é colocada no canvas.
dirtyY Opcional. O valor horizontal (y), em pixels, da posição onde a imagem é colocada no canvas.
dirtyWidth Opcional. A largura usada para desenhar a imagem no canvas.
dirtyHeight Opcional. A altura usada para desenhar a imagem no canvas.

Suporte do navegador

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

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 Canvas HTML5