HTML and CSS Reference
Zooming and Panning an Image
In this section, we will examine some methods to zoom and pan an image on the canvas.
The image we are going to use is from a recent vacation to Central California. It is a
large .jpg file, measuring 3648×2736. Obviously, this is far too large to view in a single
canvas, so we will build a simple application allowing us to zoom and pan the image
on our 500×500 canvas.
Figure 4-11 is a scaled-down version of this image.
Figure 4-11. A scaled-down version of the image we will zoom and pan
Creating a Window for the Image
The first thing we are going to do is create a logical window, the size of the canvas,
where our image will reside. We will use the following two variables to control the
dimensions of this window:
var windowWidth = 500;
var windowHeight = 500;