Core HTML5 Canvas: Graphics, Animation, and Game Development

Chapter 6. Sprites

In the last chapter you learned how to implement animations in a canvas. You saw how to use requestAnimationFrame() to implement smooth animations, and you saw how to incorporate clipping and offscreen canvases into your animations. You also learned how to implement time-based motion and how to time animations with stopwatches and animation timers.

Now that you know the fundamentals of implementing Canvas-based animations, it’s a good idea to encapsulate those fundamentals in some JavaScript objects so that you don’t have to start from scratch every time you implement an animation. This chapter explores the implementation of sprites, which are graphical objects that you can incorporate into animations. You’ll see how to move ...