HTML5 Canvas Cookbook

Attaching event listeners to images

In this recipe, we'll attach event listeners to images. As we can only attach event listeners to paths with our Events class, and as images drawn on the canvas aren't classified as paths, we can create a rectangular region that overlays an image in order to attach event listeners to the rectangular region, and consequently attach event listeners to the image.

How to do it...

Follow these steps to draw two different images and then attach mouseover, mouseout, mousedown, and mouseup event listeners to them:

1. Link to the Events class:

   <script src="events.js">
   </script>

2. Define the writeMessage() function which writes ...