How to implement rotation of the triangle behind the mouse cursor?

Question

JavaScript

Hello guys, help me solve the problem:
You need to display an isosceles triangle in the center of the screen and it should rotate with its vertex angle behind the mouse cursor, the center of rotation is the center of mass of the triangle, you need to write in pure js, at least some hint, as I understand it working with canvas

Answer 1

Draw a triangle, no matter what, at least on the canvas, at least insert a PNG-shku. Next, on onmousemove you calculate the angle between the center of the page, the initial position of the triangle's vertex and the position of the mouse, and then set the transform property for your triangle: rotate(Ndeg); where N is the resulting angle

Answer 2

I did this: I
created a block element with id "triangle"
And in JS the following:
var triangle = document.getElementById('triangle');
function getTriangleCenter() {
var x = triangle.offsetLeft + 50; // (50 + 50) / 2
var y = triangle.offsetTop + 65; // 130 / 2
return {
x: x,
y: y
};
}
document.addEventListener('mousemove', function(e) {
var triangleCenter = getTriangleCenter();
var angle = Math.atan2(e.clientX - triangleCenter.x, -(e.clientY - triangleCenter.y)) * (180 / Math.PI);
triangle.style.transform = 'rotate(' + angle + 'deg)';
});