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 mouse event listeners to regions

In this recipe, we'll get to the meat of the Events class by defining regions and adding event listeners to them. We'll draw a triangle, attach a mouseout and mousemove event listener to it, we'll draw a rectangle with no event listeners, and finally we'll draw a circle and attach a mouseover, mouseout, mousedown, and mouseup event listener to try out each of the different desktop event listeners supported by the Events class.

Attaching mouse event listeners to regions

How to do it...

Follow these steps to draw a triangle, a rectangle, and a circle, and then attach mouse event listeners to each shape:

  1. Link to the Events class:
    <script src="events.js"> ...

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