RotateFixBox

MouseOver on canvas above

Code
<canvas id="canvas" width="200" height="200" style="background-color:#f9f9f9;cursor:pointer;"></canvas>

<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var y=0,animation;

function draw() {
  ctx.clearRect(0,0, canvas.width, canvas.height);
  
  y%=360;
  y+=2;
  ctx.save();
  ctx.translate(100,100);
  ctx.rotate(y*Math.PI/180);
  ctx.translate(-100,-100);
  ctx.strokeStyle="red";
  ctx.beginPath();
  ctx.arc(100, 100, 10, 0, Math.PI * 2, true);
  ctx.fillStyle="yellow";
  ctx.fill();
  ctx.moveTo(100,100);
  ctx.lineTo(180,100)
  ctx.stroke();
  ctx.translate(180,100);
  ctx.rotate(-y*Math.PI/180);     //Try with +y value to rotate the fix box
  ctx.translate(-180,-100);
  ctx.strokeRect(165,85,30,30);
  ctx.restore();
  
  ctx.strokeText(y+"deg",10,10);    // To show the rotation
  animation = requestAnimationFrame(draw);
}

canvas.addEventListener('mouseover', function() {
  animation = requestAnimationFrame(draw);
});

canvas.addEventListener('mouseout', function() {
  cancelAnimationFrame(animation);
});
</script>
receipt
settings_ethernet