5.4. Accessing pixel values

While resizing, cropping, and transforming can be used to create interesting effects with images, there is yet another feature of canvas that lets you do even more: pixel manipulation. By accessing the individual pixels of the 2d rendering context, you're able to get information such as the color and alpha value of each pixel. You're also able to rewrite each pixel with a different color value so they look entirely different, but we'll get on to that in the following few sections.

The method that allows you to access pixels in canvas is getImageData. This method takes four arguments; the (x, y) coordinate origin of the pixel area you want to access, the width of the pixel area, and the height of the pixel area (see Figure 5-12). It looks like this in notational format: