O'Reilly logo

HTML5 Canvas Cookbook by Eric Rowell

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

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.

Attaching event listeners to images

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

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