draw position is different than click position in Union Draw within project

[shinu john]

Hi,

My draw position is different than click position in Union Draw for some reason.

i have the exact same code as in the union draw...any idea on the issue?

http://ffypblackboard.azurewebsites.net/

Student Login

Username- <anything>

password - aa

Unable to figure it out

[Toby]

I see what you mean: it draws somewhat down and to the left of where the little hand (cursor) is.
I don't have a definite answer for you, but maybe this will be helpful.

I have had problems like that too - but it's not related to Union -- just to how canvases work.

The problem was something like this: the mouse's X,Y was relative to the WINDOW,
and the drawing X,Y was relative to the canvas.

As I recall, some users had some weird toolbar added to their windows, which caused all
the offsets to be wrong.

I would debug the function GetPos (and whatever is related to it).
Also look at your HTML and CSS (rather than the JS code).
Specifying postion: absolute (or something else) for the canvas can affect this sort of thing.

Try this:
draw some text on the canvas of the form: "(x, y) is Here".
(where x, y are replaced by various numbers).
Using numbers like (20, 20) should be close to the upper left corner.

Then add some debugging to the mouse event handlers to indicate the positions
indicated by the x,y coordinates there.
Do that "(x, y) is here" thing there too.

[Colin]

The Union Draw code is intentionally simple, and does not take into account margin, padding, or other factors that might affect pointer-position values.

For more complex situations, you'll need to adjust the pointer-position-finding code.

For example,

  function pointerDownListener (e) {
    ...

    var pointerPosition = getPointerPosition(e);
    penDown(pointerPosition.x, pointerPosition.y);
    ...

  }



  function getPointerPosition(e) {
    var rect = e.target.getBoundingClientRect();
    var x = e.clientX - rect.left;
    var y = e.clientY - rect.top;
    return { x:x, y:y }
  }

The preceding code is untested, but should give you some ideas to work with.

Colin