javascript - キャンバス上のマウスクリックイベントの正しい位置を取得する方法

Question

私はキャンバスを持っています：

Canvas = function(){ //v1.0
  var o = this;
  (o.penPos = {x: 0, y: 0}, 
   o.pixelSize = 10, 
   o.pen = {style: "solid", size: 1, color: "#000"}, 
   o.brush = {style: "solid", color: "#000"});
};

私はクリックイベントで次のことをしています:

document.onclick = function(e){
  canvas.pixel(e.x, e.y);
}

しかし、座標が正しい位置に表示されません。UI設計が初めてなので、何が問題なのかわかりません。