Images on the Canvas - HTML5 Canvas - page 273

Pan and Scale in the Same Operation

To pan and scale in the same operation, we simply need to pan using the same window and
window properties as Example 4-14 and the same source scale factor as Example 4-15 :

var var windowX = 1580 ;

var

var windowY = 1190 ;

In the drawScreen() function, we will use this to draw the image:

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

Example 4-15 shows this powerful combination in action.

Example 4-15. Scale and pan to a spot on the image
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 * 2 , windowHeight * 2 , 0 , 0 , viewPortWidth , viewPortHeight );

}

When Example 4-15 isrun,youwillseethatwehavepannedtoanewspotonthelargeimage
and doubled the size of the image source rectangle. This acts as a zoom-out feature, and the
butterfly becomes much clearer than in Example 4-14 . Figure 4-16 shows this example in ac-
tion.