JSFiddle - React, Tailwind, and code Playground

HTML

<canvas></canvas>

JavaScript

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var b = 30    /180*Math.PI;

canvas.onmousemove = function(e) {
    b = Math.PI * 2 * (e.clientX / 300);
};

setInterval(function() {
var x = 50 * Math.cos(b);
var y = 50 * Math.sin(b);
//var x = 50;
//var y = 25;


ctx.clearRect(0,0,300,150);

ctx.strokeStyle = 'black';
ctx.beginPath();
ctx.moveTo(150.5, 0.5);
ctx.lineTo(150.5, 150.5);
ctx.moveTo(0.5, 75.5);
ctx.lineTo(300.5, 75.5);
ctx.stroke();

function line(x,y) {
    ctx.strokeStyle = 'black';
    ctx.beginPath();
    ctx.moveTo(150,75);
    ctx.lineTo(150+x,75+y);
    ctx.stroke();

    ctx.fillStyle = 'red';
    ctx.fillRect(150+x, 75+y, 2, 2);
}
line(x,y);
//line(-x,y);
//line(x,-y);
//line(-x,-y);

}, 50);