HTML and CSS Reference
In-Depth Information
Changing the Image Source Scale
Aside from using the viewport settings to scale an image when drawn to the canvas, we can
also change the source height and width vales to display the image in a new scale. We will
keep the view port height and width the same, but change the window height and window
width values. When we make these greater than the size of the actual window, we will see
more of the image in the 500×500 canvas, and the details will appear to be a little clearer. To
scale an image, we need to change the final width and height values of the drawImage()
function. Let'sexamine howwewouldscale to2xoftheoriginal size oftheimage while pan-
ning at the same time. The drawImage() function will look like this:
context . drawImage ( photo , windowX , windowY , windowWidth * 2 , windowHeight * 2 ,
0 , 0 , viewPortWidth , viewPortHeight );
Example 4-13 modifies Example 4-12 andaddsinthe *2 to windowHeight and windowWidth
for zooming out (2x zoom out) from the original image.
Example 4-13. Scale with source 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 = 0 ;
var
var windowY = 0 ;
function
function eventPhotoLoaded () {
drawScreen ()
}
function
function drawScreen (){
context . drawImage ( photo , windowX , windowY , windowWidth * 2 , windowHeight * 2 ,
0 , 0 , viewPortWidth , viewPortHeight );
}
If you compare the output from Examples 4-12 and 4-13 , you will notice that the image has
been scaled down by 2x. This is best illustrated if we look at the butterfly in the image. To do
Search WWH ::




Custom Search