4.10. A Magnifying Glass

Figure 4.24 shows the magnifying glass application that was introduced at the beginning of this chapter. You can drag the magnifying glass to magnify different parts of the image, and you can change the size of the magnifying glass lens and the magnification scale with the sliders at the top of the application.

Figure 4.24. A magnifying glass

Here’s how the magnifying glass works:

As the user drags the mouse, the application captures the pixels of the smallest rectangle that encloses the magnifying glass lens.

Then the application sets the clipping region to the magnifying glass lens and draws the canvas into itself, scaling the canvas pixels along the way with the nine-argument version of drawImage().

Besides drawing the magnified pixels in the magnifying glass, the application also erases the magnifying glass as the user drags it around the canvas. Every time the mouse moves while the user is dragging the magnifying glass, the application calls putImageData() to restore the background that the application saved with getImageData() the last time the user moved the mouse.