HTML and CSS Reference
Listing 6.3. game.js—Animating Canvas Ricochet
You should be aware of two important points related to listing 6.3 . First, if a code example
repeats an object property/method declaration, then you need to replace the existing code.
For example, new methods inside var Game = should be added onto your existing
Game object. Worried about modifying objects while you follow along? We'll let you know
whenever you need to modify or replace objects. Second, instead of using a clear rectangle
to wipe a Canvas clean during animation, some developers set a new width to clear the
Canvas drawing area. Although changing the width sounds more clever than creating clear
rectangles, it causes instability in browsers. We recommend using clear rectangles to erase
all previously drawn frames instead of fiddling with the width constantly.
Step 3: Display a background image