How I can get the X and Y from some move event on canvas?

Question

I am developing an app with Cordova + Onsen Ui 2 + javascript, but I am getting problems to get the coordinates X and Y from javascript move events. I tried mousemove (it didn't fire) and drag (but I got undefined when I tried to get pageX or clientX from event object). I didn't find any example about drawing with canvas yet. Thanks you all in advance!

Javascript:

var canvasListener = function(){    
    canvas = document.getElementById("canvas");    
    canvas.addEventListener('mousedown', function(event){
        var coordinates = painting(event);           
    });
    canvas.addEventListener('drag', function(event){
           var coordinates = painting(event); 
    });
    canvas.addEventListener('mouseup', function(event){
        var coordinates = painting(event);
    });
}

function painting(event){
    var x = event.clientX;
    var y = event.clientY;
    var touchX = x - signatureCanvas.offsetLeft;
    var touchY = y - signatureCanvas.offsetTop;
    var localCoordinates;    
    if(event.type == 'mouseup'){
        localCoordinates = {
            x: 0,
            y: 0
        };
    }else{
        localCoordinates = {
            x: touchX,
            y: touchY
        };
    }    
    return localCoordinates;
}

Html:

<canvas id="canvas"></canvas>

@atmd I edit and putted the code as you asked. – Rafael Santiago May 19 '16 at 13:10 — Rafael Santiago, May 19 '16 at 13:10

score 0 · Answer 1 · answered May 19 '16 at 13:37

Try this code. On moving mouse over the canvas the current mouse(x,y) co-ordinates will be printed in screen. Hope this logic only you are looking for.

JsFiddle

HTML

<canvas width="300" height="225"></canvas>

<span class="first">Move the mouse over the div.</span>
<span></span>

JS

var canvas = $('canvas');
canvas.mousemove(function(e){
    var pageCrds = '('+ e.pageX +', '+ e.pageY +')',
        clientCrds = '('+ e.clientX +', '+ e.clientY +')';

    $('span:first').text('(e.pageX, e.pageY) - '+ pageCrds);    
    $('span:last').text('(e.clientX, e.clientY) - '+ clientCrds);

});

It works on browser, but I don't think the mouse move event should work on mobile app. — Rafael Santiago, May 19 '16 at 15:59

score 0 · Answer 2 · answered May 19 '16 at 19:37

Generally you'll want to use event.clientX, event.clientY, and the results of canvas.getBoundingClientRect();. Here's an example, using the MouseMove event:

can.addEventListener('mousemove', function(e) {
  var canwidth = can.width;
  var canheight = can.height;
  var bbox = can.getBoundingClientRect();
  var mx = e.clientX - bbox.left * (canwidth / bbox.width);
  var my = e.clientY - bbox.top * (canheight / bbox.height);

  // output it to see results:
  ctx.fillRect(mx, my, 1, 1);
})

This works with all mouse/touch events on all platforms, and accommodates a lot of difficult CSS situations.

Live example: http://codepen.io/simonsarris/pen/NNVQpj?editors=1010

score 0 · Answer 3 · answered Jul 09 '16 at 17:58

Try this..

var damagesCanvas = document.getElementById('damagesCanvas');

damagesCanvas.addEventListener('click', function (evt) {
    var pos = getMousePos(damagesCanvas, evt);
}, false);

function getMousePos(damagesCanvas, evt) {
    var rect = damagesCanvas.getBoundingClientRect();
    return {
        X: evt.clientX - rect.left,
        Y: evt.clientY - rect.top
    };
}

How I can get the X and Y from some move event on canvas?

3 Answers3