function writeMessage(canvas, message) { var context = canvas.getContext('2d'); context.clearRect(0, 0, canvas.width, canvas.height); context.font = '18pt Calibri'; context.fillStyle = 'black'; context.fillText(message, 10, 25); } function getMousePos(canvas, evt) { var rect = canvas.getBoundingClientRect(), root = document.documentElement; // return relative mouse position var mouseX = evt.clientX - rect.top - root.scrollTop; var mouseY = evt.clientY - rect.left - root.scrollLeft; return { x: mouseX, y: mouseY }; } var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var message = "Mouse position: "; writeMessage(canvas, message); canvas.addEventListener('mousemove', function(evt) { var mousePos = getMousePos(canvas, evt); var message = "Mouse position: " + mousePos.x + "," + mousePos.y; writeMessage(canvas, message); }, false); canvas.addEventListener('mouseout', function(evt) { var message = "Mouse position: "; writeMessage(canvas, message); }, false);
<!DOCTYPE HTML> <html> <head> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> </body> </html>
body { margin: 0px; padding: 0px; } #myCanvas { border: 1px solid #9C9898; }