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.

Pan to the butterfly with no scale applied

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

Get HTML5 Canvas, 2nd Edition now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.