This HTML5 Canvas Notes for Professionals book is compiled from Stack Overflow Documentation, the content is written by the beautiful people at Stack Overflow. Text content is released under Creative Commons BY-SA, see credits at the end of this book whom contributed to the various chapters. Images may be copyright of their respective owners unless otherwise specified
This is an unofficial free book created for educational purposes and is not affiliated with official HTML5 Canvas group(s) or company(s) nor Stack Overflow. All trademarks and registered trademarks are the property of their respective company owners
The information presented in this book is not guaranteed to be correct nor accurate, use at your own risk
Please send feedback and corrections to [email protected]
---
This example will show how to get the mouse position relative to the canvas, such that (0,0) will be the top-left hand corner of the HTML5 Canvas. The e.clientX and e.clientY will get the mouse positions relative to the top of the document, to change this to be based on the top of the canvas we subtract the left and right positions of the canvas from the client X and Y.
var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d");
ctx.font = "16px Arial";
canvas.addEventListener("mousemove", function(e) {
var cRect = canvas.getBoundingClientRect(); // Gets CSS pos, and width/height var canvasX = Math.round(e.clientX - cRect.left); // Subtract the 'left' of the canvas var canvasY = Math.round(e.clientY - cRect.top); // from the X/Y positions to make ctx.clearRect(0, 0, canvas.width, canvas.height); // (0,0) the top left of the canvas ctx.fillText("X: "+canvasX+", Y: "+canvasY, 10, 20);
});