HTML and CSS Reference
In-Depth Information
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
);
}