I need help to make a ray directed from the center of the game to the mouse cursor, but there were problems with the offset of top and left. The line is somewhere near the mouse and I don't understand what it is connected with. Site: https://moomoo.io.
Code:
let line = document.createElement('div');
line.id = 'line';
document.body.appendChild(line);
let x = 0;
let y = 0;
document.querySelector('html').onmousemove = function(event) { // I wrote in the html selector so you can run here. There should be a gameCanvas
event = event || window.event;
console.log(event.offsetX, event.offsetY);
x = event.offsetX;
y = event.offsetY;
}
let canvas = document.getElementById('gameCanvas')
setInterval(function draw_line() {
delta_x = x - (document.documentElement.clientWidth / 2);
delta_y = y - (document.documentElement.clientHeight / 2);
theta_radians = Math.atan2(delta_y, delta_x);
console.log(theta_radians);
line.setAttribute('style', `border: 2px solid lime; width: 200px; -webkit-transform: rotate(${theta_radians}rad); position: absolute; top: ${y}px; left: ${x}px; height: 0`);
}, 1);