Mouse coord (user help)

HTML

<div id="images"></div>
<canvas style="border:1px solid #000000;margin:0;padding:0;position:relative;left:50px;top:50px;width:300px;height:300px" id="imgCanvas" width="150" height="150"></canvas>

JavaScript

var canvas = document.getElementById("imgCanvas");
var context = canvas.getContext("2d");
var isClicked = false;

function createImageOnCanvas(imageId) {
    //canvas.style.display = "block";
    //document.getElementById("images").style.overflowY = "hidden";
    //var img = new Image(300, 300);
    //img.src = document.getElementById(imageId).src;
    //context.drawImage(img, (0), (0)); //onload....
}
function notifyClick() {
	isClicked = true;
}
window.addEventListener('mousedown', notifyClick, false);
function draw(e) {
		if(isClicked) {
      var pos = getMousePos(canvas, e);
      posx = pos.x;
      posy = pos.y;
      context.fillStyle = "#000000";
      context.fillRect(posx, posy, 4, 4);
    }
}
window.addEventListener('mousemove', draw, false);

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: (evt.clientX - rect.left) / (rect.right - rect.left) * canvas.width,
        y: (evt.clientY - rect.top) / (rect.bottom - rect.top) * canvas.height
    };
}