W3Schools.com

HTML5 canvas getImageData Method

HTML5 track Tag Reference HTML5 canvas reference

Example

Turn on the color blue of every pixel inside a 50*50 rectangle.
Note: Where the pixel is allready red, the pixel will turn pink, rgba(255,0,255,255):

Canvas

Yor browser does not support the canvas tag.

JavaScript:

...
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);
var imgData=ctx.getImageData(30,30,50,50);
for (i=0; i<imgData.width*imgData.height*4;i+=4)
  {
  // Do nothing with the colors red and green, set blue=255, and alpha=255:
  imgData.data[i+2]=255;
  imgData.data[i+3]=255;
}
ctx.putImageData(imgData,30,30);
...

Try it yourself »

Definition and Usage

The getImageData method creates a new imagedata object.

All pixels of the new imagedata object has the same rgba values as the specified parts of the canvas.

With the getImageData method you can read the pixels one by one.

The getImageData method takes four parameters, specifying a rectangle of the canvas (x,y,width,height).

The imagedata object is not a picture, it specifies a part (rectangle) of the canvas, and holds information of every pixel inside that rectangle.

For every pixel in the imagedata object there are 4 pieces of information, the rgba values:
1. The color red (0-255)
2. The color green (0-255)
3. The color blue (0-255)
4. The alpha strength (0-255) where 0 is invisible and 255 is fully visible

The information is held in an array, and since the array contains 4 pieces of information of every pixel, the array's size is 4 times the size of the rectangle: width*height*4

The array containing the information is stored in the .data property of the imagedata object.

You can change the information in the array, and put the new drawings back onto the canvas, using the putImageData method.

Tip: For a demonstration of what you can do with the getImageData method, take a look at the example at the bottom of this page.

JavaScript Syntax

JavaScript syntax: context.getImageData(x,y,width,height);

The syntax for getting color information of the first pixel in the imagedata object:

imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
red  = imgData.data[0];
green= imgData.data[1];
blue = imgData.data[2];
alpha= imgData.data[3];

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The getImageData method is supported in all major browsers.

Parameter Values

Parameter Values Description
x x-coordinate The x coordinate, in the canvas, of the rectangle-area you will get
y y-coordinate The y coordinate, in the canvas, of the rectangle-area you will get
width width The width of the rectangle-area you will get
height height The height of the rectangle-area you will get

Usage

You can use the getImageData method to invert the color of every pixels on your canvas.

Here is an example where the canvas contains a picture, we will loop through all the pixels and change the color values using this formula:

red   = 255 - old_red
green = 255 - old_green
blue  = 255 - old_blue

The result is an inverted color version of the drawings on the canvas:

Example

Invert the color of every pixel of an image:

The Scream

Canvas

Yor browser does not support the canvas tag.

JavaScript:

...
for (i=0; i<imgData.width*imgData.height*4;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;
  }
ctx.putImageData(imgData,0,0);
...

Try it yourself »

HTML5 track Tag Reference HTML5 canvas reference

W3Schools Certification

W3Schools' Online Certification

The perfect solution for professionals who need to balance work, family, and career building.

More than 10 000 certificates already issued!

Get Your Certificate »

The HTML Certificate documents your knowledge of HTML.

The CSS Certificate documents your knowledge of advanced CSS.

The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.

The jQuery Certificate documents your knowledge of jQuery.

The XML Certificate documents your knowledge of XML, XML DOM and XSLT.

The ASP Certificate documents your knowledge of ASP, SQL, and ADO.

The PHP Certificate documents your knowledge of PHP and SQL (MySQL).

WEB HOSTING
Best Web Hosting
PHP MySQL Hosting
Best Hosting Coupons
UK Reseller Hosting
Cloud Hosting
Top Web Hosting
$3.98 Unlimited Hosting
Premium Website Design
WEB BUILDING
Download XML Editor
FREE Website BUILDER
Best Website Templates Top CSS Templates
CREATE HTML Websites
EASY WEBSITE BUILDER
W3SCHOOLS EXAMS
Get Certified in:
HTML, CSS, JavaScript, XML, PHP, and ASP
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
STATISTICS
Browser Statistics
Browser OS
Browser Display
SHARE THIS PAGE