HTML canvas putImageData() method

Manuel de référence du Canvas HTML5

Definition and Usage

putImageData() method places image data (from the specified ImageData object) back on the canvas.

Tip:See also getImageData() method that can copy the pixel data of the specified rectangle on the canvas.

Tip:See also createImageData() method that can create a new blank ImageData object.

Example

The following code copies the pixel data of the specified rectangle on the canvas using getImageData(), and then places the image data back on the canvas using putImageData():

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

try it yourself

syntax

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

parameter values

parameters description
imgData Définir l'objet ImageData à remettre sur le canevas.
x Coordonnée x du coin supérieur gauche de l'objet ImageData, en pixels.
y Coordonnée y du coin supérieur gauche de l'objet ImageData, en pixels.
dirtyX Optionnel. La valeur horizontale (x), en pixels, de la position de l'image sur le canevas.
dirtyY Optionnel. La valeur horizontale (y), en pixels, de la position de l'image sur le canevas.
dirtyWidth Optionnel. La largeur utilisée pour dessiner l'image sur le canevas.
dirtyHeight Optionnel. La hauteur utilisée pour dessiner l'image sur le canevas.

Support du navigateur

Les numéros dans le tableau indiquent la version du navigateur qui prend en charge cette propriété pour la première fois.

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

Remarque :Internet Explorer 8 et les versions antérieures ne prennent pas en charge l'élément <canvas>.

Manuel de référence du Canvas HTML5