Images on the Canvas - HTML5 Canvas - page 267

Changing the ViewPort Property of the Image

We can change the ViewPort property of the drawn image by modifying the viewPortWidth
and viewPortHeight values. Example 4-12 shows the image drawn into a 200×200 window,
usingthesamepixelsasthe400×400copyfrom Example 4-11 . Essentially,thisscalestheim-
age copy down to fit in a smaller space but uses the same source pixels:

var var viewPortWidth = 200 ;

var var viewPortHeight = 200 ;

Example 4-12 contains these simple changes.

Example 4-12. Changing scale with ViewPort 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 = 200 ;

var

var viewPortHeight = 200 ;

var var windowX = 0 ;

var var windowY = 0 ;

function function eventPhotoLoaded () {

drawScreen ()

}

function function drawScreen (){

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

}

When you test Example 4-12 , you will see the exact same portion of the image copied into a
smaller part of the canvas. Figure 4-13 shows an example of this scaled viewport window.