MOUSE COORDINATES

// DEFINE YOUR GLOBAL VARIABLES HERE

var canvas;
var context;

var mouseY, mouseX;

// 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;

}

</script>

</head>