Blog Design Development Mobile Inspiration CSS Javascript News Opinions Politics Menu

Canvas Cheat Sheet

HTML5 Canvas Cheat Sheet
HTML5 Canvas Text Font, Size, and Style Tutorial

HTML5 Canvas Mouse Coordinates Tutorial

Description

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

Demo