Build an HTML5 Game

Chapter 6. Rendering Canvas Sprites

Up until now, we’ve built Bubble Shooter with a DOM-based approach by using HTML elements for game objects that are styled and positioned by CSS and manipulated by JavaScript. In this chapter, we’ll rework Bubble Shooter so most of the game area is rendered to a canvas instead of using the DOM. Our game’s dialogs will remain in HTML and CSS.

Canvas rendering allows us to achieve graphical effects that are often impossible with DOM-based development, and it can often provide a faster rendering speed. To use canvas rendering for Bubble Shooter, we need to learn how to render entire scenes to the canvas, maintain state, and perform frame-by-frame animations.

We’ll keep the existing DOM-rendering code in place for ...