JSFiddle - React, Tailwind, and code Playground

HTML

<doctype html>
    <body>
        <canvas id="test"></canvas>
        <div id="angle"></div>
    </body>
</html>

JavaScript

var cx = 250;
var cy = 250;

var mx, my;

var canvas = document.getElementById('test');
var output = document.getElementById('angle');
var ctx = canvas.getContext('2d');

canvas.width = 500;
canvas.height = 500;

render();

document.onmousemove = function(e) {
    
    mx = e.offsetX;
    my = e.offsetY;
    
    var angle = Math.atan2(my - cy, mx - cx) * 180 / Math.PI;
    angle += 90;
    if(angle < 0) { angle = 360 + angle; }
    
    output.innerHTML = angle;
    render();
}
    
function render() {
    
    ctx.clearRect(0,0,500,500);
    
    ctx.fillStyle = 'black';
    
    ctx.beginPath();
    ctx.arc(cx, cy, 2, 0, Math.PI*2, true); 
    ctx.closePath();
    ctx.fill();   
    
    ctx.fillStyle = 'red';
    
    ctx.beginPath();
    ctx.arc(mx, my, 2, 0, Math.PI*2, true); 
    ctx.closePath();
    ctx.fill();
    
    ctx.strokeStyle = 'blue';
    ctx.moveTo(cx,cy);
    ctx.lineTo(cx,cy-100);
    ctx.stroke();
    
    ctx.strokeStyle = 'green';
    ctx.moveTo(cx,cy);
    ctx.lineTo(mx,my);
    ctx.stroke();
}