To get the image data for each pixel of a rectangular area on the canvas, we can get the image data object with the getImageData() method of the canvas context and then access the pixel data with the data property of the image data object. Each pixel in the image data is defined with four components, a red, green, blue, and alpha component. If we want to manipulate the image, we can modify the image data pixel array and then draw the new image back onto the canvas with the putImageData() method.
Note: The getImageData() method requires that the image is hosted on a web server with the same domain as the code executing it. If this condition is not met, a SECURITY_ERR exception will be thrown.