HTML and CSS Reference
In-Depth Information
(function tick() {
ctx.drawImage(cache, Math.random() * 300 - cache.width / 2, Math.random() * 300 - cache.height / 2);
setTimeout(tick, 20);
})();
};
img.src = "lenna.jpg";
};
Figure 16-6.
In-memory canvas example output
Needless to say, the more caches you create, the more memory you consume. You have to consider the trade-off
between speed and memory.
If you are planning to create game engines or middleware, you need to determine which shape is effective for
caching. If you cache the shape but it's drawn only once, this is an obvious waste. If you make caches whenever you
want, memory issues will be critical soon. You should improve the cache hit ratio by considering which images should
be stored and which should not.
Dirty Rect
It makes sense to redraw every frame if your target devices have the capability to achieve it, but unfortunately most
current devices have trouble with performance. To reduce redrawing, it is a good idea to reuse existing drawn data
on Canvas. You can restrict the area of drawing frame by frame to gain speed. This method is called Dirty Rect, and it
improves the performance significantly in some kinds of games.
Dirty Rect is simple; you register whenever you have a dirty region that needs to be drawn. The region is
represented as a rectangle. There are two dirty region types. One is the region that a disappearing object occupied,
and the other is one that a newly appearing object is occupying. Considering moving objects, the object disappears
from the previous position and appears in the current position (Figure
16-7
).
