4.5. Manipulating Images

The getImageData() and putImageData() methods let you access the pixels of an image and insert pixels into an image, respectively. In the meantime, if you wish, you can modify those pixels, so those two methods let you perform just about any image manipulation you can imagine.

4.5.1. Accessing Image Data

Let’s start with a common use case, selecting a region of a canvas with a rubber band, as shown in Figure 4.9.

Figure 4.9. Rubber bands

In Figure 4.9, the user selects an area of the canvas with a rubber band, and the application subsequently redraws the canvas and displays the selected area, scaled to the canvas width and height.

Every time the user drags the mouse, the application calculates the rubber band’s bounding box, captures the pixels of the image within that bounding box, and then draws the rubber band. The next time the user drags the mouse, the application restores the pixels of the image that it captured the last time the user dragged the mouse, thereby erasing the rubber band, and the process begins anew.