マウスの位置取得

<div id = "mousePosition" style = "text-align:left">
<div>
<canvas id="canvas1" width=300 height=300>lt;canvas>
<script type="text/javascript">
var mousePosition = document.getElementById("mousePosition");
var canvas1 = document.getElementById("canvas1");
var context1 = canvas1.getContext("2d");
context1.fillStyle = "rgb(0, 0, 255)";

var mouseX;
var mouseY;

function getMouseXY(e) {
	var r = e.target.getBoundingClientRect();
	mouseX = e.clientX - r.left;
	mouseY = e.clientY - r.top;
}

function mouseMoveFunc(e) {
	getMouseXY(e);
	mousePosition.firstChild.nodeValue = 'move ' + mouseX + ' ' + mouseY;
}

function mouseDownFunc(e) {
	context1.fillStyle = "rgb(0, 255, 0)";
	getMouseXY(e);
	mousePosition.firstChild.nodeValue = 'down ' + mouseX + ' ' + mouseY;
}

function mouseUpFunc(e) {
	context1.fillStyle = "rgb(0, 0, 255)";
	getMouseXY(e);
	mousePosition.firstChild.nodeValue = 'up ' + mouseX + ' ' + mouseY;
}

function mouseOutFunc(e) {
	context1.fillStyle = "rgb(0, 0, 255)";
	getMouseXY(e);
	mousePosition.firstChild.nodeValue = '';
}

canvas1.onmousemove = mouseMoveFunc;
canvas1.onmousedown = mouseDownFunc;
canvas1.onmouseup = mouseUpFunc;
canvas1.onmouseout = mouseOutFunc;

function draw1() {
	context1.clearRect(0, 0, canvas1.width, canvas1.height);
	context1.fillRect(0, 0, canvas1.width, canvas1.height);
}
setInterval(draw1, 10);
<script>