HTML and CSS Reference
In-Depth Information
Canvas Width:
<input
<input type=
"range"
id=
"canvasWidth"
min=
"0"
max=
"1000"
step=
"1"
value=
"500"
//>
<br>
Canvas Height:
<input
<input type=
"range"
id=
"canvasHeight"
min=
"0"
max=
"1000"
step=
"1"
value=
"300"
//>
<br>
Next, we add event listeners for the new form elements in the
canvasApp()
function:
formElement
=
document
.
getElementById
(
"canvasWidth"
);
formElement
.
addEventListener
(
'change'
,
canvasWidthChanged
,
false
false
);
formElement
=
document
.
getElementById
(
"canvasHeight"
);
formElement
.
addEventListener
(
'change'
,
canvasHeightChanged
,
false
false
);
Finally, we add the event handlers. Notice that we set the
width
and
height
of
theCanvas
(the variable we created that represents the
Canvas
object on screen) right inside these func-
tions. We also need to make sure that we call
drawScreen()
in each function so that the can-
vas is redrawn on the newly resized area. If we did not do this, the canvas on the page would
blank back to white:
function
function
canvasWidthChanged
(
e
) {
var
var
target
=
e
.
target
;
theCanvas
.
width
=
target
.
value
;
drawScreen
();
}
function
function
canvasHeightChanged
(
e
) {
var
var
target
=
e
.
target
;
theCanvas
.
height
=
target
.
value
;
drawScreen
();
}
We also need to change the way we draw the background for the application in the
drawScreen()
function so that it supports a resized canvas. We do this by using the
width
and
height
attributes of
theCanvas
to create our background and bounding box: