Canvas putImageData() method

Makala ya Canvas

Definition and usage

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

Tip:See also getImageData() Method that can copy the pixel data of a 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 a 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 value

Parameter Description
imgData Specify the ImageData object to be placed back on the canvas.
x The x coordinate of the top-left corner of the ImageData object, in pixels.
y The y coordinate of the top-left corner of the ImageData object, in pixels.
dirtyX Optional. The horizontal value (x), in pixels, representing the position of the image on the canvas.
dirtyY Optional. The horizontal value (y), in pixels, representing the position of the image on the canvas.
dirtyWidth Optional. The width used to draw images on the canvas.
dirtyHeight Optional. The height used to draw images on the canvas.

Browser support

Inanaa ya nambari kwenye tabia inaeleza sababu ya kwanza kwa kusakinisha sababu hiyo kwa wasafiri wa kwanza.

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

Kweli:Internet Explorer 8 na zaidi ya zamani hawakubali viungo vya <canvas>.

Makala ya Canvas