Images on the Canvas - HTML5 Canvas - page 265

canvas with the window location set to 0 , 0 . Figure 4-12 shows an example of the output for
Example 4-11 .

Example 4-11. Placing an image on the canvas in a logical window
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 = 0 ;

var var windowY = 0 ;

function function eventPhotoLoaded () {

drawScreen ()

}

function function drawScreen (){

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

}