6.10. Replacing DHTML Sprites with Canvas Sprites

In Section 2.1.6, we developed a DHTML animated sprite system and used it to create various graphical demonstrations. In Chapter 5, we used the same sprite system to develop a DHTML video game. We made some effort to “hide” the mechanics of drawing the sprites within the DHTMLSprite object in order to make the applications using it more amenable to implementing a different sprite system. Here we will convert one of the demonstrations to use a new CanvasSprite object that takes advantage of the increased performance of the Canvas element.

6.10.1. The New CanvasSprite Object

CanvasSprite is a direct replacement for the DHTMLSprite object. All parameters in the params object passed to it are the same as before, apart from the inclusion of a Canvas context parameter (ctx):