How can I get a Javascript Canvas to return x and y mouse positions?

Question

My goal is get live updating input from x and y position of my mouse. The y position works great, but when I went to add in the x position, I can't get anything but 'NaN'.

Why isn't this working for the X position as well? Is this not how to pass an object through a function? Is multiple objects the problem?

Here is my code:

canvas.addEventListener('mousemove',
    function(evt){
        var mousePos = calculateMousePosY(evt);
        paddle1Y = mousePos.y;
        //HERE IS WHERE I WANT X POSITION AS WELL
        paddle1X = mousePos.x; //Why doesn't this work?
    });
function calculateMousePos(evt){
    var rect = canvas.getBoundingClientRect();
    var root = document.documentElement;
    var mouseX = evt.clientX - rect.left - root.scrollleft;
    var mouseY = evt.clientY - rect.top - root.scrollTop;
    return{
        x:mouseX,
        y:mouseY        
    }

pushkin · Answer 1 · 2015-10-19T01:07:22.227

1

Change var mouseX = ... - root.scrollleft; to var mouseX = ... - root.scrollLeft; Capitalize the 'l' in 'left'.

Also your function is called calculateMousePos not calculateMousePosY. Remove the "Y".

edited Oct 19 '15 at 01:07

answered Oct 18 '15 at 22:46

pushkin

9,575
15
51
95

Thanks, the 'Y' was a mistype when i transferred to SO. The capital L was the culprit. – user3158443 Oct 19 '15 at 01:43

score 0 · Answer 2 · answered Oct 19 '15 at 00:20

There are two changes in your code to be made,

your function call had a mismatch of spelling var mousePos = calculateMousePosY(evt);and function calculateMousePos(evt){...} there was an extra "Y".
and it is scrollLeft,with a capital "L".

Please find the code below:[Hope it helps]

HTML:

<canvas id="myCanvas" width="578" height="200"></canvas>

Javascript:

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d'); 
canvas.addEventListener('mousemove',function(evt){
       var mousePos = calculateMousePos(evt);
       var values = 'Mouse position:' + mousePos.x + ',' + mousePos.y;
       display(canvas, values);
    });
function calculateMousePos(evt){
    var rect = canvas.getBoundingClientRect();
    var root = document.documentElement;
    var mouseX = evt.clientX - rect.left - root.scrollLeft;
    var mouseY = evt.clientY - rect.top - root.scrollTop;
    return{
        x:mouseX,
        y:mouseY        
    }
}
   
    
 function display(canvas, values) {
        var context = canvas.getContext('2d');
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.font = '18pt Calibri';
        context.fillStyle = 'black';
        context.fillText(values, 10, 25);
}

<canvas id="myCanvas" width="578" height="200"></canvas>

That's embarrassing. I'm not new to coding and I swear I really tried. 2 hours.... Thanks for the catch, great lesson to emphasize 1 step at a time and I should have created another block to catch the 'l'-->'L' — user3158443, Oct 19 '15 at 01:42
@user3158443: Happy to help. Everyone has been in your place :-) so no problem, Please do accept the answer which suits you the most. Thank you. — Pbk1303, Oct 19 '15 at 01:45

How can I get a Javascript Canvas to return x and y mouse positions?

2 Answers2