<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Mouse Coords</title>
<style type="text/css">
body,td,th { font-family: Helvetica, Arial, sans-serif; font-size: 12px; color: #000; }
body { background-color: #FFF; }
#myCanvas { border: rgb(102,0,255) medium dashed; position: relative; }
</style>
</head>
<body>
<canvas id="myCanvas" width="200" height="200"></canvas>
<br><br>
<div id="display"> <br> </div>
<hr>
<script>
var stage, mouseX, mouseY; // GLOBAL VARIABLES TO BE DECLARED AT THE BEGINNING
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
canvas.addEventListener("mousemove", mouseCoords, false);
function mouseCoords(event) {
stage = canvas.getBoundingClientRect();
mouseX = event.clientX - stage.left;
mouseY = event.clientY - stage.top;
document.getElementById('display').innerHTML = mouseX + " || " + mouseY;
draw();
}
function draw() {
//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START HERE
//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< END HERE
}
</script>
<hr>
</body>
</html>