<script>
// 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>
<body onload="setup()" onMouseMove="mousePos(event)">