HTML5 Unleashed

Chapter 6. Making Canvas Interactive and Stateful

In This Chapter

▸ Canvas Coordinates—Mouse and Touch

▸ Canvas Animation

▸ Canvas Interactivity Example: Making and Moving Shapes

Now that we’ve covered the entire canvas API, we take a look at animating the canvas and making it interactive.

Nearly all interactive canvas applications are event driven, typically by a combination of mouse, touch device, or keyboard events. Retrieving coordinates from input devices is not always an intuitive exercise, so we examine our options for handling mouse and touch events in the canvas.

This chapter then talks about the JavaScript options for animation, covering some relatively new JavaScript methods in the process. We give examples of how to draw at a specified ...