HTML5 Canvas [72]
}
function canvasHeightChanged(e) {
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 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 Figure 5-7. When you increase the width or height using the range controls, they continue moving 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?
Figure 5-7. Multiple balls bouncing while the canvas is resized on the fly
Example 5-6. Multiple ball bounce with dynamically resized canvas