W3Schools.com

HTML5 canvas putImageData 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, rgb(255,0,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 putImageData method is used to put the data from an imagedata object onto the canvas.

The putImageData method can take three or seven parameters, three if the drawings should be the same size and shape as the imageData, and seven if you want to specify what part of the drawings that should be placed onto the canvas.

Read about the getImageData method, to learn how to manipulate the pixels.

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

JavaScript Syntax

Place the whole drawing onto the canvas, only specifying where in the canvas to put it:

JavaScript syntax: context.putImageData(imgData,x,y);

Specify what part of the drawing, and where in the canvas to put it:

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

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The putImageData method is supported in all major browsers.

Parameter Values

Parameter Values Description
imgData imgData The imagedata object to put on the canvas
x x-coordinate The x coordinate, in the canvas, of where to put the drawings
y y-coordinate The y coordinate, in the canvas, of where to put the drawings
dirtyX x-coordinate The x coordinate, of the drawings you want to put onto the canvas
dirtyY y-coordinate The y coordinate, of the drawings you want to put onto the canvas
dirtyWidth width The width of the drawings you want to put onto the canvas
dirtyHeight height The height of the drawings you want to put onto the canvas

Usage

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

Here is an example where the canvas contains a picture, we use the getImageData method to loop through all 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

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
XML Editor - Free Trial!
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