HTML and CSS Reference
In-Depth Information
Figure 8-10.
One easy method to avoid having to repaint the big image on every frame is to keep it “static” and
completely separate from the actual, dynamic canvas where you'll be painting the animation
Like in the “Dirty Rectangles” section, the second solution consists of only repainting the portion of the image
that was overwritten by the moving object (in this case, the ball). The biggest advantage of this second approach is
that it will allow you to not only paint the ball, but also to replace small bits of the background as well. A good example
is a background of a forest where some of the trees are moving while the rest of the image remains static.
Usually, there are two ways to handle this scenario. The first approach, which is the one you've been using so far,
consists of painting an image directly into the canvas in your DOM tree. Then, in order to grab a portion of the image,
you would just need to use a reference to your image object. But what happens if your background is composed
of more than one image? For example, let's suppose that your background is composed of three different images,
one that has a sky texture, another one that has clouds, and another one with trees (the trees, for example, could be
generated and placed procedurally). In such a case, one of the best approaches is to work with an in-memory canvas
that allows you to compose the full background in an in-memory Canvas, and then treat that canvas as a regular
image, as displayed in Figure
8-11
.
