0

I have text line at first after that i have canvas
but position mouse on canvas it's wrong (zero of y position now = height of text line)
http://jsfiddle.net/dSC26/

<div id="output">output</div>
<div id="container"></div>

yoda.on('mousemove', function(e) {
    $('#output').html('position mouse on canvas: '+'x: ' + e.clientX + ', y: ' + e.clientY); 
});

How can i fix that, thanks!.

DeLe
  • 2,442
  • 19
  • 88
  • 133
  • Are you saying that the canvas should display x: 0 , y: 0 instead of 21? – karthick Apr 09 '13 at 04:27
  • yes, i want display 0,0. i don't want hardfix like (e.clientY-21), because i don't know exactly, it's 20 not 21 – DeLe Apr 09 '13 at 04:30
  • Have a look at http://stackoverflow.com/questions/4249648/jquery-get-mouse-position-within-an-element – plalx Apr 09 '13 at 04:31
  • @plalx i don't using jquery here. i using jquery for display message and it's not working for me :( – DeLe Apr 09 '13 at 04:45

2 Answers2

1

You can use the event.offsetX/Y or event.layerX/Y properties.

Have a look here -> http://jsfiddle.net/dSC26/2/

yoda.on('mousemove', function(e) {
    var offsetX = e.offsetX || e.layerX,
        offsetY = e.offsetY || e.layerY;

    $('#output').html('position mouse on canvas: '+'x: ' + offsetX + ', y: ' +  offsetY); 
});
plalx
  • 42,889
  • 6
  • 74
  • 90
  • 1
    Np ;) However, you should have a look at browser compatibility to make sure it's supported everywhere. – plalx Apr 09 '13 at 04:49
1

Just use stage.getMousePosition(). Example here:

http://www.html5canvastutorials.com/kineticjs/html5-canvas-path-mouseover/

You can also sue stage.getTouchPosition() for touch events, or stage.getPointerPosition() for mouse or touch events

Eric Rowell
  • 5,191
  • 23
  • 22