Testing canvas location

by Spencer Smith

HTML

<canvas width="300" height="300">
</canvas>
<div id="out"></div>

CSS

body {
	background-color: lightgray;
	text-align: center;
}
canvas{
	background-color: white;
}

JavaScript

function mousePosition(e) {
  var rect = canvas.getBoundingClientRect();
  var pos = {
    x: e.clientX - rect.left,
    y: e.clientY - rect.top
  };
  return pos;
}
var canvas = document.getElementsByTagName("canvas")[0];
document.onclick = function(e){
	var pos = mousePosition(e);
	document.getElementById("out").innerText = pos.x + ", " + pos.y;
}