Canvas Pixel Manipulation

Canvas Pixel Manipulation
Published on 2021-07-05 10:47:11

Pixel Manipulation with "getImageData" and "putImageData"

Introduction to "context.getImageData"

Html5 Canvas gives you the ability to fetch and change the color of any pixel on the canvas.

You can use Canvas's pixel manipulation to:

  • Create a color-picker for an image or select a color on a color-wheel.
  • Create complex image filters like blurring and edge detection.
  • Recolor any part of an image at the pixel level (if you use HSL you can even recolor an image while retaining the important Lighting & Saturation so the result doesn't look like someone slapped paint on the image). Note: Canvas now has Blend Compositing that can also recolor an image in some cases.
  • "Knockout" the background around a person/item in an image,
  • Create a paint-bucket tool to detect and Floodfill part of an image (eg, change the color of a user-clicked flower petal from green to yellow).
  • Examine an image for content (eg. facial recognition).

Common issues:

  • For security reasons, getImageData is disabled if you have drawn an image originating on a different domain than the web page itself.
  • getImageData is a relatively expensive method because it creates a large pixel-data array and because it does not use the GPU to assist its efforts. Note: Canvas now has blend compositing that can do some of the same pixel manipulations that getImageData does.
  • For .png images, getImageData might not report the exact same colors as in the original .png file because the browser is allowed to do gamma-correction and alpha-premultiplication when drawing images on the canvas.


Getting pixel colors

Use getImageData to fetch the pixel colors for all or part of your canvas content. The getImageData method returns an imageData object

The imageData object has a .data property that contains the pixel color information. The data property is a Uint8ClampedArray containing the Red, Green, Blue & Alpha (opacity) color data for all requested pixels.

// determine which pixels to fetch (this fetches all pixels on the canvas)
var x=0;
var y=0;
var width=canvas.width;
var height=canvas.height;
// Fetch the imageData object
var imageData = context.getImageData(x,y,width,height);
// Pull the pixel color data array from the imageData object
var pixelDataArray =;

You can get position of any [x,y] pixel within data array like this:

// the data[] array position for pixel [x,y]
var n = y * canvas.width + x;

And then you can fetch that pixel's red, green, blue & alpha values like this:

// the RGBA info for pixel [x,y]
var red=data[n];
var green=data[n+1];
var blue=data[n+2];
var alpha=data[n+3];

ATutorialHub Related Guide

Comments (9)

Leave a Comment

Your email address will not be published. Required fields are marked*

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments


2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments


2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments


2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments


2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website

html tutorial comments


2021-09-25 19:35:50

Nice website