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.0; 

var translation = [100, 50];

// let's handle mousemove with jQuery
$("#ilikegianasisters").mousemove(function(e) {
    
  e.pageX -= translation[0];
  e.pageY -= translation[1];    
    
  /* 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() {
  
  angle+= 0.001;
    
  ctx.save();
  ctx.clearRect(0, 0, 400, 200);
  ctx.translate(translation[0], translation[1]);
  ctx.rotate(angle);
   
  ctx.fillStyle = "#f9c";
  ctx.fillRect(0, 0, 400, 200); 
    
  ctx.fillStyle = "#f00";
  ctx.fillRect(currentX - 10, currentY - 10, 20, 20);     
    
  ctx.restore();
}, 20);

/* author: rezoner.net */