HTML5 Canvas Mouse Coordinates Tutorial

To get the mouse coordinates relative to an HTML5 Canvas, we can create a getMousePos() method which returns the mouse coordinates based on the position of the client mouse and the position of the canvas obtained from the getBoundingClientRect() method of the window object.

Instructions: Mouseover the canvas to see the mouse coordinates

new window

Code Editor

Modified on April 9th, 2013 by Eric Rowell
comments powered by Disqus