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 ;