putImageData() Method - Javascript Canvas Reference

Javascript examples for Canvas Reference:putImageData

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>

Related Tutorials