How to get correct position of the mouse click event on canvas

Question

I have a canvas:

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"});
};

I am doing the following on click event:

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

but it doesn't show the co ordinates in correct position, I don't know what is going wrong, as I am new to UI designing.

You also need to use the formatting options of SO properly. It was a right mess — mplungjan, Sep 02 '13 at 07:05
where is your `canvas.pixel` code? your code is missing something. — OneOfOne, Sep 02 '13 at 07:09
You could use code from this answer: http://stackoverflow.com/a/2159129/816449 — Bunyk, Sep 02 '13 at 07:35

score 0 · Answer 1 · answered Sep 02 '13 at 17:02

If you are going to listen for clicks on document you want:

event.offsetX 
event.offsetY

To get the coordinates relative to the canvas element. You will also need to check that your target element is the canvas element of interest.

You may be better off listening for clicks on the canvas element itself.

How to get correct position of the mouse click event on canvas

1 Answers1