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:
Search WWH ::




Custom Search