JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="ilikegianasisters" width=400 height=200></canvas>
<p>mouseCoords: <span id="mouse"></span></p>
<p>pointCoords: <span id="point"></span></p>

JavaScript

// these will hold cursor position converted to rotated canvas position
currentX = 0;
currentY = 0;

// rotation angle in radians
var angle = 0.3; 

// let's handle mousemove with jQuery
$("#ilikegianasisters").mousemove(function(e) {
    
  /* rotate mouse position by the negative of the angle 
     to get its position on rotated canvas */
    
  currentX = e.pageX * Math.cos(-angle) - e.pageY * Math.sin(-angle);
  currentY = e.pageX * Math.sin(-angle) + e.pageY * Math.cos(-angle);   

  $("#mouse").html(Math.floor(e.pageX) + "," + Math.floor(e.pageY));
  $("#point").html(Math.floor(currentX) + "," + Math.floor(currentY));
          
});
    
// some sort of magic!
ctx = document.getElementById("ilikegianasisters").getContext("2d");

// i like red, do you ?
ctx.fillStyle = "#f00";

// some drawing to get visual feedback on experiment
setInterval(function() {
   
  ctx.save();
  ctx.clearRect(0, 0, 400, 200);
  ctx.rotate(angle);
  ctx.fillRect(currentX - 10, currentY - 10, 20, 20); 
  ctx.strokeRect(0, 0, 400, 200); 
  ctx.restore();
}, 20);

/* author: rezoner.net */