O'Reilly logo

Build an HTML5 Game by Karl Bunyan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required