HTML and CSS Reference
Figure 16-7. Dirty Rect
There are two major implementations of Dirty Rect with the Canvas API (Figure 16-8 ). One is registering all
dirty regions as clipping regions using clip() method, and drawing all shapes inside the clipping area. The other is
clipping only one big rectangle as a clipping region, which includes all dirty regions, and drawing all the shapes inside.
Figure 16-8. Two types of Dirty Rect
The former fits when there are few moving objects, and the latter fits when there are lots of moving objects.
You should choose the best method for your game after considering their pros and cons.
If your game needs to redraw full screen every frame because you have to register the entire screen as dirty
region, you can avoid the Dirty Rect method. But in this case, it is good idea to have a flag to determine whether to
draw or not. The flag will help to prevent consuming battery power. I will discuss this in detail later in the “Battery