YouTipMet Canvas Getimagedata
[ Canvas Object](#)
## Example
The following code copies the pixel data of a specified rectangle on the canvas using getImageData(), and then puts the image data back onto the canvas using putImageData():
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);
function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}
[Try it »](#)
* * *
## Browser Support
The getImageData() method is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.
**Note:** Internet Explorer 8 and earlier versions do not support the element.
* * *
## Definition and Usage
The getImageData() method returns an ImageData object, which copies the pixel data of a specified rectangle on the canvas.
**Note:** The ImageData object is not an image; it specifies a part (rectangle) of the canvas and stores the information of each pixel within that rectangle.
For each pixel in the ImageData object, there are four pieces of information, namely the RGBA value:
R - Red (0-255)
G - Green (0-255)
B - Blue (0-255)
A - Alpha channel (0-255; 0 is transparent, 255 is fully visible)
The color/alpha information is stored in an array form within the (#) property of the ImageData object.
**Tip:** After manipulating the color/alpha information in the array, you can use the [putImageData()](#) method to copy the image data back onto the canvas.
**Example:**
The following code gets the color/alpha information of the first pixel in the returned ImageData object:
red=imgData.data;
green=imgData.data;
blue=imgData.data;
alpha=imgData.data;
(#)
**Tip:** You can also use the getImageData() method to invert the color of each pixel of an image on the canvas.
Use this formula to iterate over all pixels and change their color values:
red=255-old_red;
green=255-old_green;
blue=255-old_blue;
Please see the "Try it" example below!
* * *
## JavaScript Syntax
| JavaScript Syntax: | _context_.getImageData(_x,y,width,height_); |
| --- |
## Parameter Values
| Parameter | Description |
| --- | --- |
| _x_ | The x-coordinate of the upper-left corner of the rectangle to start copying from (in pixels). |
| _y_ | The y-coordinate of the upper-left corner of the rectangle to start copying from (in pixels). |
| _width_ | The width of the rectangular area to copy. |
| _height_ | The height of the rectangular area to copy. |
* * *
## More Examples
## Image to use:
## Example
Use getImageData() to invert the color of each pixel of the image on the canvas:
YourbrowserdoesnotsupporttheHTML5canvastag.
JavaScript:
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
for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data=255-imgData.data;
imgData.data[i+1]=255-imgData.data[i+1];
imgData.data[i+2]=255-imgData.data[i+2];
imgData.data[i+3]=255;
}
ctx.putImageData(imgData,0,0);
[Try it »](#)
* * Canvas Object](#)