HTML5 Canvas Cookbook

Chapter 6. Interacting with the Canvas: Attaching Event Listeners to Shapes and Regions

In this chapter, we will cover:

• Creating an Events class
• Working with canvas mouse coordinates
• Attaching mouse event listeners to regions
• Attaching touch event listeners to regions on a mobile device
• Attaching event listeners to images
• Dragging-and-dropping shapes
• Dragging-and-dropping images
• Creating an image magnifier
• Creating a drawing application

Introduction

So far, we've learned how to draw on the canvas, work with images and video, and create fluid animations. This chapter focuses on canvas interactivity. Until now, all of our canvas projects have been very unresponsive and disengaged from the user. Although the HTML5 canvas API doesn't provide us with a means ...