HTML5 Canvas Cookbook

Working with canvas mouse coordinates

To get our feet wet with the Events class, we'll keep it simple by getting the mouse coordinates of the cursor using the getMousePos() method from the Events class and then displaying it in the top-left corner of the canvas. The getMousePos() method returns the mouse coordinates relative to the canvas, which takes into account the offset position of the canvas relative to the page, and also the scroll position of the page.

How to do it...

Follow these steps to get the canvas mouse coordinates and display them in the upper-left corner of the canvas each time the mouse cursor moves:

1. Link to the Events class:

   <script ...