What could be the reason for the strange behavior of the segment on the coordinate axis?

Question

JavaScript

The code

Inverted the values ​​of top, making the right side of the window the same as OY (perhaps it would have been smarter to use bottom).

Calculated by the formula the length of the segment, where x1 y1 are given top left positions of the line, x2 y2 are the coordinates of the cursor on the screen.

Using the formula stolen from the converter site, I calculated the angle between the segment and OX, converted it to degrees

spoiler

getAngularCoefficient: function(x1, y1, x2, y2) {
            let r = y2 - y1,
                r1 = x2 - x1,
                res,
                angular;
            
            if (r == 0 && r1 == 0) {
               res = 0;
               
            } else if (r != 0 && r1 == 0) {
               res="Infinity";
               
            } else {
               let res1 = (+r) / (+r1);
               res = Math.round(1000 * res1) / 1000;
            };
            
            angular = _methods.getAngular(res);
            
            _methods.setLineDeg($LINE, angular);
         },

Then hemorrhoids began, on which I hung, it's easier to look at the example itself.
The only area where the segment behaves normally is the sector X, -Y
In the XY sector, the segment convulses.
In other sectors, everything is not much better, but at least there is an obvious reason - the sign of the angle value is inverted.

Answer 1

I understand that you are trying to get the coordinates of the point at which the line begins, using this code:

let coords = {
                  x1: line.offset().left,
                  y1: Math.abs(line.offset().top - wHeight)
               };

If you add console.log(coords) after these lines, you will see numbers in the developer console that change depending on the position of the cursor. But the beginning of the line does not change, so there is an error.
I replaced your code with this:

let coords = {
                  x1: 10,
                  y1: wHeight / 2
               };

And it looks like you still have an error somewhere in determining the direction of the corner.

Answer 2

You don't need corner tricks for this task. Initial data -
Xm Ym - mouse coordinates
Xc Yc - coordinates of the "center" - where the line grows from
find the direction from the center to the cursor N={Xm-Xc;Ym-Yc}
now we make a vector of unit length {Xv, Yv} = {Xm- Xc;Ym-Yc} /sqrt( (Xm-Xc)^2 + (Ym-Yc)^2 )
now we "extend" our vector to the length we need {Xr,Yr}={Xv*L;Yv*L}
Well, we draw Line(Xc, Yc, Xc+Xr,Yc+Yr)