HTML5 Canvas, 2nd Edition

Panning to a Spot on the Source Image

Example 4-14 changes the windowY and windowX locations to a sort that will display the butterfly. It removes any scaling from the draw operation:

var windowX=1580;
var windowY=1190;

When Example 4-14 is run, you should see the butterfly image take up most of the canvas.

Example 4-14. Pan an image using the widow draw destination properties

var photo=new Image();
    photo.addEventListener('load', eventPhotoLoaded , false);
    photo.src="butterfly.jpg";


    var windowWidth=500;
    var windowHeight=500;
    var viewPortWidth=500;
    var viewPortHeight=500;

    var windowX=1580;
    var windowY=1190;


    function eventPhotoLoaded() {
        drawScreen()
    }

    function drawScreen(){
        context.drawImage
       (photo, windowX,windowY,windowWidth,windowHeight,0,0,viewPortWidth,
        viewPortHeight);
    }
    function gameLoop() {
        window.setTimeout(gameLoop, 100);
        drawScreen();
    }

Figure 4-15 shows the pan to the butterfly in normal view scale mode.

Figure 4-15. Pan to the butterfly with no scale applied