MOUSE COORDINATES

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>MOUSE COORDINATES</title>

// DEFINE YOUR GLOBAL VARIABLES HERE

var canvas;
var context;

var stage, mouseX, mouseY;

// INITIALIZE THE STARTING FUNCTION

function setup() {

canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");

// CALL SUBSEQUENT FUNCTIONS, as many as you need

drawBkgd(); // COVER TRANSPARENT CANVAS

draw(); // THIS IS WHERE AL HAPPENS

}

function drawBkgd() { // USE THIS AREA TO MODIFY BKGD

}

function draw() {
// >>>>>>>>>>>>>>>>>>>>>>>>>> START HERE

// >>>>>>>>>>>>>>>>>>>>>>>>>> END HERE
}

///// MOUSE COORDINATES

function mousePos(event) {

stage = canvas.getBoundingClientRect();
// stage.left is in case you position canvas using css
mouseX = event.clientX - stage.left;

mouseY = event.clientY - stage.top;

document.getElementById("display").innerHTML = mouseX + " // " + mouseY;

draw(); // NEEDS TO BE CALLED EVERY SINGLE TIME THE EVENT IS TRIGGERED
}

</script>