HTML5 Canvas [57]
windowWidth,windowHeight);
Let’s take a closer look at this for a refresher on how the drawImage() function operates. The values are passed in order:
photo
The image instance we are going to use as our source for painting onto the canvas
windowX
The top-left x location to start copying from the source image
windowY
The top-left y location to start copying from the source image
windowWidth
The width of the rectangle to start copying from the source image
windowHeight
The height of the rectangle to start copying from the source image
0
The top-left x destination location for the image on the canvas
0
The top-left y destination location for the image on the canvas
windowWidth
The width in pixels for the destination copy (this can be modified to scale the image)
windowHeight
The height in pixels for the destination copy (this can be modified to scale the image)
When we draw from the image to the canvas, we will be modifying the windowX and windowY values to create a panning effect. Example 4-11 demonstrates how to get the image onto the canvas with the window location set to 0,0. Figure 4-12 shows an example of the output for Example 4-11.
Example 4-11. Placing an image on the canvas in a logical window
var photo = new Image();
photo.addEventListener('load', eventPhotoLoaded , false);
photo.src = "butterfly.jpg";
var windowWidth = 500;
var windowHeight = 500;
var windowX = 0;
var windowY = 0;
function eventPhotoLoaded() {
drawScreen()
}
function drawScreen(){
context.drawImage(photo, windowX, windowY, windowWidth, windowHeight,
0, 0, windowWidth,windowHeight);
}
Figure 4-12. An image in a small logical window
Panning the Image
To pan the window across the image, we simply need to modify the windowX and windowY coordinates. In Example 4-12, we will modify the windowX coordinate inside a frame tick interval. During each loop iteration, we will increase the value of windowX by 10. We need to be careful not to go off the far right side of the image, so we will subtract the windowWidth from the image.width, and use the result as the maximum windowX position:
windowX+ = 10;
if (windowX>photo.width - windowWidth){
windowX = photo.width - windowWidth;
}
Example 4-12 contains the changes necessary to perform this panning operation.
Example 4-12. Simple image panning
var photo = new Image();
photo.addEventListener('load', eventPhotoLoaded , false);
photo.src = "butterfly.jpg";
var windowWidth = 500;
var windowHeight = 500;
var windowX = 0;
var windowY = 0;
function eventPhotoLoaded() {
startUp();
}
function drawScreen(){
context.drawImage(photo, windowX, windowY, windowWidth, windowHeight,
0,0,windowWidth,windowHeight);
windowX += 10;
if (windowX>photo.width - windowWidth){
windowX = photo.width - windowWidth;
}
}
function startUp(){
setInterval(drawScreen, 100 );
}
When you test Example 4-12, you will see the window pan across the image and stop at the rightmost edge. Next, we will start to implement zooming into this simple example.
Zoom and Pan the Image
To zoom in or out of an image, we need to change the final width and height values of the drawImage() function. Let’s examine how we would zoom out to 50% of the original size of the image while panning at the same time. The drawImage() function will look like this:
context.drawImage(photo, windowX, windowY, windowWidth, windowHeight,
0, 0, windowWidth*.5,windowHeight*.5);
Example 4-13 modifies Example 4-12 and adds in the 50% zoom.
Example 4-13. Pan an image with a preset zoom out
var photo = new Image();
photo.addEventListener('load', eventPhotoLoaded , false);
photo.src = "butterfly.jpg";
var windowWidth = 500;
var windowHeight = 500;
var windowX = 0;
var windowY = 0;
function eventPhotoLoaded() {
startUp();
}
function drawScreen(){
context.drawImage(photo, windowX, windowY, windowWidth, windowHeight,
0,0,windowWidth*.5,windowHeight*.5);
windowX += 10;
if (windowX>photo.width - windowWidth){
windowX = photo.width - windowWidth;
}