JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas4" width="350" height="350">
  
</canvas>

<div id="xy"> 

</div>

CSS

#canvas4{
    border: 1px solid #000;
}
body{
    margin: 0;
}

JavaScript

function drew(rad){
  var canvas = document.getElementById("canvas4"); 
  var context = canvas.getContext("2d");
    context.clearRect ( 0 , 0 ,1000 , 1000 );
  context.save();
  context.scale(0.5, 1);
  context.beginPath();
  var startAngle = 0 * Math.PI; // rad
  var endAngle = rad; // rad
  var counterClockwise = false;

  //context.beginPath();
  context.arc(200, 200, 100, startAngle, endAngle, false);

  context.restore();
  context.lineWidth=2;
  context.strokeStyle="orange";
  context.stroke();  

   context.beginPath();
   context.arc( 100 + (Math.cos(rad)*50)  , 200 + (Math.sin(rad)*100)  , 5, 0, 2 * Math.PI, false);
   context.fillStyle = 'green';
   context.fill();
   context.lineWidth = 1;
   context.strokeStyle = '#003300';
   context.stroke();


   context.beginPath();
   context.arc( 100 ,200  , 5, 0, 2 * Math.PI, false);
   context.fillStyle = 'red';
   context.fill();
}
drew(1.2 * Math.PI);
document.getElementById("canvas4").addEventListener('mousemove',
                 function(e){
  
     $("#xy").text("x" + e.clientX + ", y" + e.clientY);
        
    drew((0.5 *  Math.PI) - Math.atan2( e.clientX - 100  ,    e.clientY - 200  ));
});