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
);
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
);
}