JSFiddle - React, Tailwind, and code Playground

by B L Praveen

HTML

<canvas id="canvas_ele" width=250 height=250></canvas>

CSS

#canvas_ele{border:1px solid red;}

JavaScript

var canvas = document.getElementById('canvas_ele');
var toRad = (2 * Math.PI) / 360;
function draw() {
// Make sure we don't execute when canvas isn't supported
  if (canvas.getContext){
    // use getContext to use the canvas for drawing
    var ctx = canvas.getContext('2d');
    var radius = 50;
    var startAngle = 0;  // Starting point on circle
    var endAngle   = toRad * 180; 
     // End point on circle
    var clockwise  = true; // clockwise or anticloc
 //Fill Canvas with Gray     
ctx.beginPath(); 
 ctx.clearRect(0, 0, canvas.width, canvas.height);           
ctx.fillStyle = "rgb(242,242,242)";  
ctx.fillRect(0,0,250,250); ;      
//Draw an arc
ctx.strokeStyle = "rgb(0,0,0)"; 
ctx.arc(100,100,radius,startAngle,endAngle, clockwise);  
 ctx.stroke();  
 ctx.closePath();
 //Draw an Handle     

  }
}
draw()

 DrawHandle((100 + 50* Math.cos(135 * toRad)),(100  - 50* Math.sin(135 * toRad)));     
//Handle mouse move event
canvas.onmousemove = handleMouseMove;

//Function to draw the handle
function DrawHandle(x,y) {
  if (canvas.getContext){
      var ctx = canvas.getContext('2d');
      var radius = 5;
     var startAngle = 0;  // Starting point on circle
    var endAngle   = toRad * 360; 
     // End point on circle
    var clockwise  = true;
    ctx.beginPath();  
    ctx.fillStyle = "rgb(0,0,0)";  
    ctx.arc(x,y,radius,startAngle,endAngle, clockwise);  
 ctx.fill();    
 ctx.closePath();       
  }
}
//canvas offest
var canvasoffset = canvas.getBoundingClientRect();
var offsetX = canvasoffset.left;
var offsetY = canvasoffset.top;

//Mouse move event handle function
function handleMouseMove(e){
  var ctx = canvas.getContext('2d');
  // get the mouse position

  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  // set the current radian angle of the mouse
  // versus the centerpoint

  var anglvCen = Math.atan2( mouseY-100, mouseX-100 );
  console.log(anglvCen);
  ctx.clearRect(0, 0, canvas.width, canvas.height); 
  draw();
 ...