テキストエリアの角に要素が追従できるようにしたい

Question

概要：

◆操作
//全体ソースコード参照
・ダブルクリックで要素を作成
・作成した要素をクリックでアクティブ状態にすると角に四角い要素が表示される
・テキストエリアをドラッグすると移動でき、角の要素も追従して移動する
・角をドラッグするとテキストエリアが拡大・縮小する
・右クリックでメニューが表示される
・角度メニューを選択して値を変更する事により、テキストエリアの角度が変わる

◆角の要素追従によるイベントの動き
・テキストエリアの移動による角の要素の追従　→マウスムーブイベント
・角の要素の移動によるテキストエリアの拡大・縮小　→マウスムーブイベント
・角度メニューによるテキストエリアの角度変更　→クリックイベント
・文字入力時のテキストエリア拡大による、角の要素(左下、右下)による移動　→インプットイベント

やりたいこと：

角度が変わった状態でも、角の要素がテキストエリアの四隅に追従できるようにしたい。

通常の状態だと、角の要素はテキストエリアに追従できるようになっているが、
角度が変わると角の要素の追従が上手くいかない。

試してみたこと：

角の要素
左上： lt
右上： rt
右下： rb
左下： lb

試しに角度メニューより、
テキストエリアの左上の座標を取得して、その値をlbに入れることにより、追従できないか試みてみた。
active.parentNode.querySelector('.lt').style.left = parseInt(getComputedStyle(active).left) + 'px';
active.parentNode.querySelector('.lt').style.top = parseInt(getComputedStyle(active).top) + 'px';
この方法で値を取得は出来たが、角度メニューのイベントを行っても値は変化せず固定されたままだった。

次の方法として、
前回はstyleの値を取得しようとしたが、今回は座標位置を取得しようとして、各要素の座標位置を減算しながら値を取得しようとした。
active.parentNode.querySelector('.lt').style.left = active.getBoundingClientRect().left - active.closest('.canvas-parent').getBoundingClientRect().left - 5 + 'px';
active.parentNode.querySelector('.lt').style.top = active.getBoundingClientRect().top - active.closest('.canvas-parent').getBoundingClientRect().top

角度メニューを行う度ににlbの要素は移動したが、テキストエリアの角度が９０度以上になると何故か移動した位置を逆に移動し始めた。
可能性として回転して角の位置が変わる事により、lb→rbの位置として認識される？

ご教示頂きたく何卒お願い致します。

全体ソースコード：

https://codepen.io/mio-rei/pen/abWXNrd

ソースコード抜粋：

// 角度メニュー　矢印↑クリック
    const angleUp = document.querySelector('.agup-arrow');

    angleUp.onclick = () => {
        if(inputAngle.value >= 360) {
            alert('359以上の数値は入力できません。');
            return;
        }
        if (!document.querySelector('.ip-check') &&
            !document.querySelector('.ip-check2')) {
            const active =  document.querySelector('.active');
            active.style.transform = `rotate(${Number(inputAngle.value)}deg)`;
            active.parentNode.querySelector('.lt').style.transform = `rotate(${Number(inputAngle.value)}deg)`;

         //   active.parentNode.querySelector('.lt').style.left = parseInt(getComputedStyle(active).left) + 'px';
         //   active.parentNode.querySelector('.lt').style.top = parseInt(getComputedStyle(active).top) + 'px';
            active.parentNode.querySelector('.lt').style.left = active.getBoundingClientRect().left - active.closest('.canvas-parent').getBoundingClientRect().left - 5 + 'px';
            active.parentNode.querySelector('.lt').style.top = active.getBoundingClientRect().top - active.closest('.canvas-parent').getBoundingClientRect().top - 5 + 'px';
         
       
     
            }
         
        for (const cks of checkAll) {
            if (cks.checked == true) {
                cks.nextElementSibling.style.transform = `rotate(${Number(inputAngle.value)}deg)`;
            } 
        }
        for (const cks2 of checkAll2) {
            if (cks2.checked == true) {
                cks2.nextElementSibling.style.transform = `rotate(${Number(inputAngle.value)}deg)`;
            } 
        }
        inputAngle.value = Number(inputAngle.value) + 1;

}