javascript绘制在页面中间的画布上没有正确检测高度

I'll start off by saying feel free to edit the title, as i don't know what to call it.I am trying to make a small image editor for a game(Flappy loach) And I have the following so far: http://joeybabcock.me/tests/php/7.php However, when I try to get the client's mouse position, it doesn't seem to work. it is centered using :

 position: fixed;
 top: 50%;
 left: 50%;
 margin-top: -32px;
 margin-left: -32px;

For css and for the javascript detecting the position:

function logClick(e) {
console.log('click at X='+ (screen.availWidth - (Math.ceil(e.clientX / 2)))+'Y='+(screen.availHeight - (Math.ceil(e.clientY / 2))));
}

Log click is called by: canvar.addEventListener('mouseout', logClick); What I want it to say, is when I mouse over the brown square's left top corner it should say X=0, Y=0, and if I mouse over the bottom right, it would say, X=64, Y=64. Thanks for any help.