putImageData() Method - Javascript Canvas Reference

Description

The putImageData() method puts the image data from a specified ImageData object back onto the canvas.

JavaScript syntax

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

Parameter Values

Parameter	Description
imgData	ImageData object
x	The x-coordinate in pixels of the upper-left corner of the ImageData object
y	The y-coordinate in pixels of the upper-left corner of the ImageData object
dirtyX	Optional. The x value in pixels where to place the image on the canvas
dirtyY	Optional. The y value in pixels where to place the image on the canvas
dirtyWidth	Optional. The width to use to draw the image on the canvas
dirtyHeight	Optional. The height to use to draw the image on the canvas

Example

The code below copies the pixel data for a rectangle with getImageData(), and put image data back to canvas with putImageData():

Demo Code

ResultView the demo in separate window

<!DOCTYPE html>
<html>
<body>

<img id="scream" src="http://java2s.com/resources/c.png" alt="The Scream" width="220" height="277">
<canvas id="myCanvas" width="220" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
document.getElementById("scream").onload = function() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("scream");
    ctx.drawImage(img, 0, 0);
    var imgData = ctx.getImageData(0, 0, c.width, c.height);
    // invert colors
    var i;
    for (i = 0; i < imgData.data.length; i += 4) {
        imgData.data[i] = 255 - imgData.data[i];
        imgData.data[i+1] = 255 - imgData.data[i+1];
        imgData.data[i+2] = 255 - imgData.data[i+2];
        imgData.data[i+3] = 255;
    }/* w  w w.j a  va  2 s  .  co m*/
    ctx.putImageData(imgData, 0, 0);
};
</script>

</body>
</html>