Images on the Canvas - HTML5 Canvas - page 271

Panning to a Spot on the Source Image

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

var var windowX = 1580 ;

var 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

var photo = new new Image ();

photo . addEventListener ( 'load' , eventPhotoLoaded , false

false );

photo . src = "butterfly.jpg" ;

var var windowWidth = 500 ;

var

var windowHeight = 500 ;
var var viewPortWidth = 500 ;

var

var viewPortHeight = 500 ;

var var windowX = 1580 ;

var var windowY = 1190 ;

function function eventPhotoLoaded () {

drawScreen ()

}

function function drawScreen (){

context . drawImage
( photo , windowX , windowY , windowWidth , windowHeight , 0 , 0 , viewPortWidth ,
viewPortHeight );

}
function function gameLoop () {

window . setTimeout ( gameLoop , 100 );
drawScreen ();

}

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