Math, Physics, and Animation - HTML5 Canvas - page 329

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 ();

}

NOTE
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 var numBalls = 500 ;

Now, check out Example 5-6 ( CH5EX6.html from the code distribution). When you run the
code in a web browser, you should see 500 balls bounce around the canvas, as shown in Fig-
ure 5-8 . When you increase the width or height using the range controls, they continue mov-
ing until they hit the new edge of the canvas. If you make the canvas smaller, the balls will be
contained within the smaller space. If you adjust the size too rapidly, some balls will be lost
off the canvas, but they will reappear when the canvas is resized. Neat, huh?