HTML and CSS Reference
In-Depth Information
<form>
Canvas Width: <input type="range" id="canvasWidth"
min="0"
max="1000"
step="1"
value="500"/>
<br>
Canvas Height: <input type="range" id="canvasHeight"
min="0"
max="1000"
step="1"
value="500"/>
<br>
</form>
In canvasApp() , we create the event listeners for the HTML5 form controls. We listen
for the change event, which means any time the range control is moved, the event han-
dlers will be called:
formElement = document.getElementById("canvasWidth")
formElement.addEventListener('change', canvasWidthChanged, false);
formElement = document.getElementById("canvasHeight")
formElement.addEventListener('change', canvasHeightChanged, false);
The event handler functions capture the changes to the range, set theCanvas.width or
theCanvas.height , and then call drawScreen() to render the new size. Without a call to
drawScreen() here, the canvas will blink when the new size is applied in drawScreen()
on the next interval:
function canvasWidthChanged(e) {
var target = e.target;
theCanvas.width = target.value;
drawScreen();
}
function canvasHeightChanged(e) {
var target = e.target;
theCanvas.height = target.value;
drawScreen();
}
All of this is explained in gory detail in Chapter 3 .
One last thing—let's increase the number of balls set in canvasApp() to 500 :
var numBalls = 500 ;
Search WWH ::




Custom Search