Getting mouse point coordinates in Javascript HTML5 Canvas

Question

I am having difficulty of getting the mouse coordinates and the hero's coordinates.

When I click on the bottom right corner of the canvas I get a result of x = 641, y = 386 for the mouse click. The enemy coordinate system is 100% accurate.

It seems that the enemy coordinate system is different than the mouse coordinate system. I want them to be on a single coordinate system. Thanks for your help!

This is the initialization of canvas:

<canvas id="canvas" width = "1664" height = "1000" style = "border:1px solid gray; width: 640px; height 480px;"> </canvas>

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top
    };
}

var mousePos = getMousePos(Context.canvas,e);
            //Use mousePos.x or mousePos.y to get the coordinates of the mouse click
            var mx, my;
            if(e.offsetX) {
                mx = e.offsetX;
                my = e.offsetY;
            }
            else if(e.layerX) {
                mx = e.layerX;
                my = e.layerY;
            }
            Gun.shoot()
            for (var i = EnemyManager.enemies.length - 1; i >= 0; i--) {
                var enemy = EnemyManager.enemies[i]
                console.log("Enemy: " + enemy.x + " " + enemy.y)
                console.log("Mouse: " + mousePos.x + " " + mousePos.y)

                if ((enemy.x < mx) && (enemy.y < my) && ( (enemy.x + enemy.width) > mx ) && (enemy.y + enemy.height > my)) {
                    alert("Target HIT")
                }
            };  
        })*

score 0 · Answer 1 · edited May 23 '17 at 11:58

0

I've had the same problem using canvas (especially it needs to work when scrolled down on the page, offset from the top of the page by arbitrary divs, and at different zoom levels). I've found the approach in this answer to be the most robust as a replacement to that getMousePos function.

edited May 23 '17 at 11:58

Community

1
1

answered Oct 08 '15 at 14:15

JayCrossler

2,079
2
22
22

score 0 · Answer 2 · answered Oct 08 '15 at 14:23

You are receiving different coordinates probably because you are using two different methods. In the player's position, you are using offsetX instead of mousePos.X (enemy.X in comparison)

Also, since you are defining the return of getMousePos as X and Y, you need to access them as X and Y. So:

var mx, my;
mx = mousePos.X;
my = mousePos.Y;

EDIT: You may also find this link helpful.

score 0 · Answer 3 · answered Oct 08 '15 at 14:40

You are clicking outside of canvas see my example, http://jsfiddle.net/gn0pkkra/.

document.getElementById('wrapper').addEventListener('click', on_canvas_click, false);

You can compute the exact trajectory even if you are clicking outside of canvas. Then Cartesian coordinates will have the center (0,0) on you game cannon position in canvas. Compute cannon/gun offset over top left corner of canvas (real 0,0) and use those offsets to detect your trajectories.

Clicking on buttom right of the canvas, or even outside of it's impossible to get negative values.

@redstoneologistcode - what is the problem then? can you share enemy coordinates or something... — SilentTremor, Oct 09 '15 at 08:31

Getting mouse point coordinates in Javascript HTML5 Canvas

3 Answers3