Les réponses de @jilles de wit et @jk. m'ont conduit sur le bon chemin mais pour une raison quelconque n'ont pas fourni la bonne solution à mon problème qui, je pense, est très similaire à la question originale.
Je voulais obtenir : haut = 0°, droite = 90°, bas = 180°, gauche = 270° comme dans les systèmes de navigation aéronautique.
En supposant que la question faisait référence au dessin sur toile, j'ai trouvé cette solution :
J'ai d'abord traduit l'origine du canevas en utilisant ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2)
. J'ai également divisé par deux e.offsetX et e.offsedY que j'ai obtenus à partir d'un événement souris sur le canevas pour obtenir x et y avec le même système de coordonnées que le canevas.
let radianAngle = Math.atan2(y, x); // x has the range [-canvas.width/2 ... +canvas.width/2], y is similar
let northUpAngle = radianAngle * 180 / PI + 90; // convert to degrees and add 90 to shift the angle counterclockwise from it's default "left" = 0°
if (x < 0 && y < 0) { // check for the top left quadrant
northUpAngle += 360; // add 360 to convert the range of the quadrant from [-90...0] to [270...360] (actual ranges may vary due to the way atan2 handles quadrant boundaries)
}
northUpAngle.toFixed(2) // to avoid getting 360° near the "up" position
Il existe peut-être une solution plus concise utilisant l'opération modulo, mais je ne l'ai pas trouvée.