Récupérer les coordonnées de la souris dans un canvas

Interagir avec la souris: position, click

Un canvas permet de représenter à peu près tout type de dessin, de graphique, dans une page html. C'est en fait un espace de pixels qui peuvent, comme tout autre élément html, être manipulés via javascript (ou php, ou python, ...).
On peut ainsi tracer des dessins et les animer. En maths, on peut tracer des courbes d'une fonctions, ou dessiner des vecteurs et les animer, déplacer.
Tout ceci nécessite de pouvoir interagir avec la souris, le pointer, de l'utilisateur, lequel doit donc être localisé.

Dans cette page, on indique comment récupérer et afficher les coordonnées de la souris dans un élément canvas. On donne ces coordonnées dans le système de coordonnées de base du canvas ainsi que les coordonnées dans un repère mathématique qu'on peut choisir et définir à loisir. Le détails de la définition et la programmation de ce repère et système de coordonnées se trouvent sur cette page.

Résultat / Affichage

On commence par le résultat: le canvas sur lequel il suffit de cliquer pour afficher les coordonnées dans les deux repères: celui par défaut du canvas et le repère affiché, plus courant en maths.

Clic sur le canvas !

Le html: déclaration du canvas


<canvas id="canvas1" width="300" height="200" style="border: 2px solid black;">
</canvas>
<p id="texte">Clic sur le canvas !</p>

Bien sûr, le style css du canvas peut (doit) être mis à part dans l'en-têtre ou un fichier css distinct.

Le javascript pour piloter le canvas, avec les changements de repère et coordonnées

On récupère les dimensions du canvas Width et Height, ce qui permet de définir les 4 fonctions (en rouge dans le code suivant) de changement de coordonnées, abscisses et ordonnées, et le repère par défaut de canvas et celui qu'on souhaite définir et utiliser.
On pourrait regrouper ces fonctions en 2 seulement qui retrourne directement le couple de coordonnées, à voir…
La fonction MouseClickDown est celle qui permet effectivement de lire les coordonnées de la souris au moment du click, puis de les afficher en bas du canvas.

<script>
// On récupère les dimensions du canvas:
Width=document.getElementById("canvas1").width;
Height=document.getElementById("canvas1").height;
// et on fixe les bornes de nos nouveaux axes:
xmin=-10;xmax=10;ymin=-15;ymax=20;

// Conversions de coordonnees: 
//  [xmin;xmax]<->[0;Width] et [ymin;ymax]<->[0;Height] 
function cnv2x(X) {return X*(xmax-xmin)/Width+xmin;}
function cnv2y(Y) {return (Height-Y)*(ymax-ymin)/Height+ymin;}
function x2cnv(x) {return Width*(x-xmin)/(xmax-xmin);}
function y2cnv(y) {return Height-Height*(y-ymin)/(ymax-ymin);}


// Fonction qui trace les nouveaux axes et affiche les bornes:
function Plot_axes() {

  // Nouveaux axes:
  context.beginPath();
  context.moveTo(x2cnv(0),y2cnv(ymin));context.lineTo(x2cnv(0),y2cnv(ymax));
  context.moveTo(x2cnv(xmin),y2cnv(0));context.lineTo(x2cnv(xmax),y2cnv(0));
  context.stroke();
  // Affichage des valeurs min et max aux extrémités des axes:
  context.fillText(xmin,x2cnv(xmin),y2cnv(0));
  context.fillText(xmax,x2cnv(xmax)-12,y2cnv(0));
  context.fillText(ymin,x2cnv(0),y2cnv(ymin)-2);
  context.fillText(ymax,x2cnv(0),y2cnv(ymax)+10);
}


// Pour l'exemple ici, on affiche les coordonnées au 
// Click de la souris
function MouseClickDown(e){
  X = e.pageX - canvas.offsetLeft;
  Y = e.pageY - canvas.offsetTop;
  // On efface toute le canvas
  context.clearRect(0,0,Width,Height);
  // On retrace les axes
  Plot_axes();
  // On marque par une croix l'emplacement du click:
  context.fillRect(X-5,Y,10,1);context.fillRect(X,Y-5,1,10);
  // et on affiche les coordonnées:
  document.getElementById("texte").innerHTML="(X,Y) = ("+X+" ; "+Y+")";
  document.getElementById("texte").innerHTML+="(x,y) = ("+Math.round(cnv2x(X)*100)/100+" ; "+Math.round(cnv2y(Y)*100)/100+")";
}


// Et c'est parti:
canvas = document.getElementById("canvas1");
context = canvas.getContext("2d");
Plot_axes();

canvas.onmousedown = MouseClickDown;

</script>

Utilisation, application

En utilisant ce programme, on peut maintenant par exemple déplacer / animer un élément dans canvas.

↑

Voir aussi: