Comment obtenir les coordonnées d'un clic de souris sur un élément du canevas ?

Question

Quelle est la manière la plus simple d'ajouter un gestionnaire d'événement de clic à un élément de toile qui renverra les coordonnées x et y du clic (par rapport à l'élément de toile) ?

Aucune compatibilité avec les anciens navigateurs n'est requise. Safari, Opera et Firefox font l'affaire.

Answer 1

Si vous aimez la simplicité mais que vous voulez quand même une fonctionnalité multi-navigateurs, j'ai trouvé que cette solution était la meilleure pour moi. Il s'agit d'une simplification de la solution de @Aldekein mais sans jQuery .

function getCursorPosition(canvas, event) {
    const rect = canvas.getBoundingClientRect()
    const x = event.clientX - rect.left
    const y = event.clientY - rect.top
    console.log("x: " + x + " y: " + y)
}

const canvas = document.querySelector('canvas')
canvas.addEventListener('mousedown', function(e) {
    getCursorPosition(canvas, e)
})

Answer 2

Mise à jour (5/5/16) : Réponse des patrons devrait être utilisé à la place, car il est à la fois plus simple et plus fiable.

---

Étant donné que le canevas n'est pas toujours stylé par rapport à l'ensemble de la page, la fonction canvas.offsetLeft/Top ne renvoie pas toujours ce dont vous avez besoin. Il renvoie le nombre de pixels qu'il est décalé par rapport à son élément offsetParent, ce qui peut être quelque chose comme un div contenant le canevas avec un position: relative appliqué. Pour tenir compte de cela, vous devez passer en boucle la chaîne de offsetParent en commençant par l'élément de toile lui-même. Ce code fonctionne parfaitement pour moi, testé dans Firefox et Safari mais devrait fonctionner pour tous.

function relMouseCoords(event){
    var totalOffsetX = 0;
    var totalOffsetY = 0;
    var canvasX = 0;
    var canvasY = 0;
    var currentElement = this;

    do{
        totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft;
        totalOffsetY += currentElement.offsetTop - currentElement.scrollTop;
    }
    while(currentElement = currentElement.offsetParent)

    canvasX = event.pageX - totalOffsetX;
    canvasY = event.pageY - totalOffsetY;

    return {x:canvasX, y:canvasY}
}
HTMLCanvasElement.prototype.relMouseCoords = relMouseCoords;

La dernière ligne rend les choses plus pratiques pour obtenir les coordonnées de la souris par rapport à un élément du canevas. Tout ce qui est nécessaire pour obtenir les coordonnées utiles est

coords = canvas.relMouseCoords(event);
canvasX = coords.x;
canvasY = coords.y;

Answer 3

Edit 2018 : Cette réponse est assez ancienne et elle utilise des vérifications pour les anciens navigateurs qui ne sont plus nécessaires, comme le clientX y clientY fonctionnent dans tous les navigateurs actuels. Vous pouvez consulter Réponse de Patriques pour une solution plus simple et plus récente.

Réponse originale :
Comme décrit dans un article que j'ai trouvé à l'époque mais qui n'existe plus :

var x;
var y;
if (e.pageX || e.pageY) { 
  x = e.pageX;
  y = e.pageY;
}
else { 
  x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
  y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
} 
x -= gCanvasElement.offsetLeft;
y -= gCanvasElement.offsetTop;

Ça a parfaitement fonctionné pour moi.

Answer 4

Selon des données fraîches Quirksmode le site clientX y clientY sont prises en charge par tous les principaux navigateurs. Voici donc le bon code qui fonctionne dans un div défilant sur une page avec des barres de défilement :

function getCursorPosition(canvas, event) {
var x, y;

canoffset = $(canvas).offset();
x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft - Math.floor(canoffset.left);
y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop - Math.floor(canoffset.top) + 1;

return [x,y];
}

Cela nécessite également jQuery pour $(canvas).offset() .

Answer 5

J'ai fait une démonstration complète qui fonctionne dans tous les navigateurs avec le code source complet de la solution de ce problème : Coordonnées d'un clic de souris sur Canvas en Javascript . Pour essayer la démo, copiez le code et collez-le dans un éditeur de texte. Enregistrez-le ensuite sous le nom de example.html et, enfin, ouvrez le fichier avec un navigateur.