Falcon80 Logo
Getting image data from canvas

You can read the pixel data on a canvas using the getImageData() method. Image data includes the colour of the pixel (decimal, rgb values) and transparency (alpha value).

The getImageData() allows you to get the pixel data from any rectangular area.


x,y = The starting point of the rectangular area
length = length of the rectangular area
breath = breath of the rectangular area

For ex:

var imageData = ctx.getImageData(10,10,100,50);

The above statement will read the pixels within the rectangule, defined by the starting point (10,10), length 100px and breath 50px. You can also read a single pixel data by setting the length and breath to 1.

var imageData = ctx.getImageData(10,10,1,1);

Return value from getImageData()

You can assign the return value (an ImageData object) of getImageData() to a variable and then draw it back on canvas using the putImageData() method. The colour and transparency information will be stored in an array. If you are reading a single pixel as in

var imageData = ctx.getImageData(10,10,1,1);

You can access the coloru values as follows:

imageData.data[0] - Value of red in decimal (integer between 0 and 255)
imageData.data[1] - value of green in decimal (integer between 0 and 255)
imageData.data[2] - Value of blue in decimal (integer between 0 and 255)
imageData.data[3] - Alpha value (integer between 0 and 255)

If you are reading a bunch of pixels within a rectangle, the length and breath value you provide in the getImageData() method will determine the array size of the return value.

For example, if you have

var Pixel = ctx.getImageData(10,10,2,2);

You are reading the pixel data within a 2 X 2 rectangle. However, the return value, Pixel will be a one-dimentional array of 16 (2 *2 = 4 pixels, with each pixel requiring 4 spaces in the array to store colour and alpha values. So 4 * 4 = 16).

Thus, if you want to read the colour information for the fourth pixel,

The information will be contained in Pixel.data[12], Pixel.data[13], Pixel.data[14], and Pixel.data[15].

Finding the size of a pixel object:

The return value from getImageData() will contain both the height and width of the rectangular area from where the colour data was read. To access the width and height, use pixel.width and pixel.height respectively


1. If the canvas has images loaded from the hard disk and you try to access pixel information using the getImageData() method, it will not work and will show a security violation "NS_ERROR_DOM_SECURITY_ERR". This is because DOM will not allow accessing pixel data to be accessed if the underlying image is from a different domain. When the image comes from the hard disk, DOM does not know that the image is from the same domain and hence throws the error. To test your code without running into this error, run a local web server like apache,  or test your code from the server itself.

2. The getImageData() and putImageData() are expensive operations. So wherever possible, find ways to get around using them.

  <script type="application/javascript">
function init() {
var canvas = document.getElementById("canvas");
if (canvas.getContext)
var canvas = document.getElementById("canvas");
if (canvas.getContext) { var ctx = canvas.getContext("2d");

// Let's draw a green square
ctx.fillStyle = "rgb(0,127,0)";

// We will now get two pixels, the first one filling inside the above square and the other outside the square
var Pixel = ctx.getImageData(29,10,2,1);

// Let's print out the colour values of the first pixel. Since we have set the colour of the
// square as rgb(0,127,0), that is what the alert should print out. Since we have not set
// any alpha value, Pixel.data[3] should be the defualt 255.
alert("Pixel 1: "+ Pixel.data[0]+", "+Pixel.data[1]+", "+ Pixel.data[2]+", "+ Pixel.data[3]);

// Print out the second pixel, which is outside the square.
// since we have drawn nothing there yet, it will show the default values 0,0,0,0 (Transparent Black)
alert("Pixel 2: "+ Pixel.data[4]+", "+ Pixel.data[5]+", "+ Pixel.data[6]+", "+ Pixel.data[7]);

// Let's get the width and height data from Pixel
alert("Pixels Width: " + Pixel.width); alert("Pixels Height: " + Pixel.height);
<title> HTML5 Canvas - Pixel Manipulation </title>
<body onload="init();">
<canvas id="canvas" width="900" height="500"></canvas><br>

Try Code