[MC-XOBAHCK]

Я идею понял, что можно ещё проще всё сделать. Просидел вчера весь день, но прокачаться до уровня "Говнокодер повелитель стрелочек" не получилось.

Пришёл к тому что теперь нужна только одна точка с координатами x,y.
Ввёл новый параметр - длина стрелочки (в px). Так удобнее. Вторую точку находим через формулу прибавив длину стрелочки к координате x.

Убрал ориентацию (горизонтально/вертикально) и вместо неё добавил rotate в градусах (0-360).
При повороте началось смещение. Как я понял, оно регулируется через трансформ, но пока я к этому не пришёл.

Написал такой онлайн повелитель стрелочек, чтобы понять смещение. Но в нём баг. При указании координат x и y - поведение как будто умножается а не суммируется.
Интерпритатор может оценивать в формуле переменную x2 как помножить на два?

Пока завис на этом баге. До смещения ещё не дошёл, попробовал смотреть поведение меняя параметры через strelka.translate(10, 10); но пока мне баг мешает с этим поработать.

<canvas style="border:1px solid black"></canvas>
<p>Координата X: <input id="x" type="number" min="0" value="0"> Координата Y: <input id="y" type="number" min="0" value="0"></p>
<p>Поворот (Градусы): <input id="deg" type="number" min="0" max="360" value="0"> Длина стрелки (px): <input id="w" type="number" min="0" value="400"></p>

<script>
function risunok() {
    let v = [], lstr, hstr,
        color = 'red',  // цвет стрелочки
        lw = 2,         //толщина линии

        deg = +inputDeg.value,
        x = +inputX.value,
        y = +inputY.value,
        w = +inputWidth.value;

    var canvasRoof = document.querySelector('canvas');
    let strelka = canvasRoof.getContext('2d');
    
    switch (true) { //сами указатели стрелочек - длина и высота (в зависимости от длины стрелочки)
        case (w >= 300):            lstr = 30; hstr = 3; break;
        case (w >= 100 && w <300):  lstr = 20; hstr = 2; break;
        case (w < 100):             lstr = 10; hstr = 2; break;
    }
    
    let x2 = (x + w);//координата x2
    v = [x,y, x2,y, (x + lstr),(y - hstr), x,y, (x + lstr),(y + hstr), (x2 - lstr),(y - hstr), x2,y, (x2 - lstr),(y + hstr)];//координаты
    
    canvasRoof.width = 700;
    canvasRoof.height = 450;

    if (canvasRoof && canvasRoof.getContext) {
        strelka.fillStyle = '#fff';
        strelka.fillRect(0, 0, canvasRoof.width, canvasRoof.height);
        
        strelka.translate(x, y);
        strelka.rotate((Math.PI / 180) * deg); //поворот на .. градусов
        strelka.translate(-x, -y);

        strelka.strokeStyle = color;
        strelka.lineWidth = lw;
        strelka.beginPath();
        strelka.moveTo(v[0], v[1]);
        strelka.lineTo(v[2], v[3]);
        strelka.stroke();

        strelka.beginPath();
        strelka.lineWidth = 1;
        strelka.moveTo(v[4], v[5]);
        strelka.lineTo(v[6], v[7]);
        strelka.lineTo(v[8], v[9]);
        strelka.stroke();
        strelka.fillStyle = color;
        strelka.fill();

        strelka.beginPath();
        strelka.lineWidth = 1;
        strelka.moveTo(v[10], v[11]);
        strelka.lineTo(v[12], v[13]);
        strelka.lineTo(v[14], v[15]);
        strelka.stroke();
        strelka.fillStyle = color;
        strelka.fill();
    }
}

const inputDeg = document.querySelector('#deg');
const inputX = document.querySelector('#x');
const inputY = document.querySelector('#y');
const inputWidth = document.querySelector('#w');

inputDeg.addEventListener('input', () => risunok());
inputX.addEventListener('input', () => risunok());
inputY.addEventListener('input', () => risunok());
inputWidth.addEventListener('input', () => risunok());

risunok();
</script>