Помогите понять Canvas

[MC-XOBAHCK]

Не могу понять как работать с канвасом.
Вот мой пример (canvas и блок с размерами):

<style>.skat-size{display:inline-block;margin:15px 10px;padding:0 10px 10px;border:solid 1px #ccc;}</style>

<canvas id="valma" width="420" height="220">Конверт</canvas>

<div class="row plos" data-area="valma">
    <div class="skat-size">
        <h4>Трапеция</h4>
        <div>Карниз:</div>
        <div>
            <input class="valma" type="text" /><span class="unit"> м</span>
        </div>
        <div>Конёк:</div>
        <div>
            <input class="valma" type="text" /><span class="unit"> м</span>
        </div>
        <div>Высота:</div>
        <div>
            <input class="valma" type="text" /><span class="unit"> м</span>
        </div>
    </div>
    <div class="skat-size">
        <h4>Треугольный скат</h4>
        <div>Длина карниза:</div>
        <div>
            <input class="valma" type="text" /><span class="unit"> м</span>
        </div>
        <div>Высота ската:</div>
        <div>
            <input class="valma" type="text" /><span class="unit"> м</span>
        </div>
    </div>
</div>


<script>
var canvasValma = document.querySelector('canvas#valma');

function canvasRoof() {
    let valm_sk1 = '#bbb',
        valm_sk2 = '#ccc',
        valm_sk3 = '#ddd',
        valm_sk4 = '#ccc';
    
    let valma = canvasValma.getContext('2d');

    if (canvasValma && canvasValma.getContext) {
        valma.fillStyle = '#fff';
        valma.fillRect(0, 0, 420, 220);
        
        valma.beginPath();   // 1 сторона
        valma.moveTo(0, 0);
        valma.lineTo(400, 0);
        valma.lineTo(300, 100);
        valma.lineTo(100, 100);
        valma.fillStyle = valm_sk1;
        valma.fill();
        
        valma.beginPath();   // 2 сторона
        valma.moveTo(400, 0);
        valma.lineTo(300, 100);
        valma.lineTo(400, 200);
        valma.fillStyle = valm_sk2;
        valma.fill();

        valma.beginPath();   // 3 сторона
        valma.moveTo(0, 200);
        valma.lineTo(100, 100);
        valma.lineTo(300, 100);
        valma.lineTo(400, 200);
        valma.fillStyle = valm_sk3;
        valma.fill();

        valma.beginPath();   // 4 сторона
        valma.moveTo(0, 0);
        valma.lineTo(100, 100);
        valma.lineTo(0, 200);
        valma.fillStyle = valm_sk4;
        valma.fill();
    }
}


canvasRoof();

function razmStrel(color, v, lw) {   // Принимает: color - цвет, v - координаты (массив), lw - толщина линии
    let strelka = canvasValma.getContext('2d');

    if (canvasValma && canvasValma.getContext) {
        // Размерные стрелки
        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.beginPath();
        strelka.lineWidth = 1;
        strelka.moveTo(v[10], v[11]);
        strelka.lineTo(v[12], v[13]);
        strelka.lineTo(v[14], v[15]);
        strelka.stroke();
    }
}

var inp = document.querySelectorAll('input');
for (let i = 0; i < inp.length; i++) {
    inp[i].addEventListener('focus', function() {
        let color = 'green',
            v,
            lw = 2;
        switch (i) {    //Для вальмы
            case 0: v = [0,210, 400,210, 15,207, 0,210, 15,213, 385,207, 400,210, 385,213]; break;
            case 1: v = [100,115, 300,115, 115,112, 100,115, 115,118, 285,112, 300,115, 285,118]; break;
            case 2: v = [120,100, 120,200, 117,115, 120,100, 123,115, 117,185, 120,200, 123,185]; break;
            case 3: v = [410,0, 410,200, 407,15, 410,0, 413,15, 407,185, 410,200, 413,185]; break;
            case 4: v = [300,100, 400,100, 315,97, 300,100, 315,103, 385,97, 400,100, 385,103]; break;
        }

        razmStrel(color, v, lw);
    })

    inp[i].addEventListener('blur', () => canvasRoof());
    
}
</script>

Я нарисовал фигуру, но не знаю как мне реализовать интерактивность. Нужно сигменты из канваса на отдельные части разделять или как это делается?
Например, чтобы при наведении курсора на блок с размерами (инпутами), на канвасе менял цвет соответствующий фрагмент.
А при установке фокуса в инпуте, появлялась размерная стрелка в нужном месте, при выходе из фокуса стрелка убиралась.

[MC-XOBAHCK]

Думал-думал, попробовал несколько идей и смог функцию надумать добавляющую стрелки (код в топике исправил).

Только при фокусе в инпуте стрелки добавляются, а как их убрать когда фокус снимается???

[Dilettante_Pro]

как их убрать когда фокус снимается

Перерисовывать canvas без них

[рони]

MC-XOBAHCK,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</head>

<body>
<div id="slider"></div>
<style>.skat-size{display:inline-block;margin:15px 10px;padding:0 10px 10px;border:solid 1px #ccc;}</style>

<canvas id="valma-test2" width="420" height="220">Конверт</canvas>

<div class="row plos" data-area="valma">
    <div class="skat-size">
        <h4>Трапеция</h4>
        <div>Карниз:</div>
        <div>
            <input class="valma" type="text" /><span class="unit"> м</span>
        </div>
        <div>Конёк:</div>
        <div>
            <input class="valma" type="text" /><span class="unit"> м</span>
        </div>
        <div>Высота:</div>
        <div>
            <input class="valma" type="text" /><span class="unit"> м</span>
        </div>
    </div>
    <div class="skat-size">
        <h4>Треугольный скат</h4>
        <div>Длина карниза:</div>
        <div>
            <input class="valma" type="text" /><span class="unit"> м</span>
        </div>
        <div>Высота ската:</div>
        <div>
            <input class="valma" type="text" /><span class="unit"> м</span>
        </div>
    </div>
</div>


<script>
let valm_sk1 = '#bbb',
    valm_sk2 = '#ccc',
    valm_sk3 = '#ddd',
    valm_sk4 = '#ccc';
var canvasValma2 = document.querySelector('#valma-test2');
function draw()
{

    let valma = canvasValma2.getContext('2d');
    if (valma) {
        valma.clearRect(0, 0, 420, 220);
        valma.beginPath();   // 1 сторона
        valma.moveTo(0, 0);
        valma.lineTo(400, 0);
        valma.lineTo(300, 100);
        valma.lineTo(100, 100);
        valma.fillStyle = valm_sk1;
        valma.fill();

        valma.beginPath();   // 2 сторона
        valma.moveTo(400, 0);
        valma.lineTo(300, 100);
        valma.lineTo(400, 200);
        valma.fillStyle = valm_sk2;
        valma.fill();

        valma.beginPath();   // 3 сторона
        valma.moveTo(0, 200);
        valma.lineTo(100, 100);
        valma.lineTo(300, 100);
        valma.lineTo(400, 200);
        valma.fillStyle = valm_sk3;
        valma.fill();

        valma.beginPath();   // 4 сторона
        valma.moveTo(0, 0);
        valma.lineTo(100, 100);
        valma.lineTo(0, 200);
        valma.fillStyle = valm_sk4;
        valma.fill();
    }
}


    draw() ;
    function razmStrel(color, v, lw){   // Принимает: color - цвет, v - координаты (массив), lw - толщина линии
         let strelka = canvasValma2.getContext('2d');

        if (strelka) {
            // Размерные стрелки
            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.beginPath();
            strelka.lineWidth = 1;
            strelka.moveTo(v[10], v[11]);
            strelka.lineTo(v[12], v[13]);
            strelka.lineTo(v[14], v[15]);
            strelka.stroke();
        }
    }


var inp = document.querySelectorAll('input');

[].forEach.call(inp, function(node,i) {
    let color = 'green',
            v,
            lw = 2;
        switch (i) {
            case 0: v = [0,210, 400,210, 15,207, 0,210, 15,213, 385,207, 400,210, 385,213]; break;
            case 1: v = [100,115, 300,115, 115,112, 100,115, 115,118, 285,112, 300,115, 285,118]; break;
            case 2: v = [120,100, 120,200, 117,115, 120,100, 123,115, 117,185, 120,200, 123,185]; break;
            case 3: v = [410,0, 410,200, 407,15, 410,0, 413,15, 407,185, 410,200, 413,185]; break;
            case 4: v = [300,100, 400,100, 315,97, 300,100, 315,103, 385,97, 400,100, 385,103]; break;
        }
   node.addEventListener("focus", function() {

        draw();
        razmStrel(color, v, lw);
});

   node.addEventListener("blur", draw)



});


</script>

</body>
</html>

[MC-XOBAHCK]

Dilettante_Pro, Спасибо! Я понял идею.
Со стрелками получилось, пришлось ток ещё сначала весь канвас белым прямоугольником залить.

[MC-XOBAHCK]

рони, Спасибо! Я не обновлял страницу и увидел пост поздно, поэтому успел исправить код в топике (так бы новым постом свой код сделал).

А в вашем коде меня смущают вот такие моменты:

[].forEach.call(inp, function(node,i) {....
node.addEventListener("blur", draw)...

Мне ещё до этого уровня как минимум год сидеть за JS, а пока я этого не понимаю : (
Поставлю ваш вариант, надеюсь при расширении приложения проблем не будет, но если что откачу к своему варианту.

[рони]

[].forEach.call(inp, function(node,i) {....
node.addEventListener("blur", draw)...

тоже самое(почти) что

for (let i = 0; i < inp.length; i++) {
inp[i].addEventListener

node это inp[i].

[рони]

MC-XOBAHCK,
[].forEach.call

[MC-XOBAHCK]

После простановки координат для 15 стрелочек (я посчитал), случилась эврика (помидор на голову не падал).
Я понял что мне достаточно всего лишь 3 координаты, чтобы нарисовать стрелочку.

Вывел две таких формулы:

//стрелка вертикально (x, y1, y2):
v = [x,y1, x,y2, (x - 3),(y1 + 30), x,y1, (x + 3),(y1 + 30), (x - 3),(y2 - 30), x,y2, (x + 3),(y2 - 30)]

//стрелка горизонтально (x1, x2, y):
v = [x1,y, x2,y, (x1 + 30),(y - 3), x1,y, (x1 + 30),(y + 3), (x2 - 30),(y - 3), x2,y, (x2 + 30),(y + 3)]

Поэтому решил добавить к стрелкам такие параметры:
size: 'little', 'normal', 'big'
orientation: 'horizontal', 'vertical'

Ориентация - по какой формуле считать координаты. Поставлю на if (orientation == 'horizontal') {...}

Размер - это заменю из формулы значения 3 и 30 (ширина и длина самого указателя стрелки), чтобы на маленьких расстояниях можно было уменьшать, на больших - делать побольше.

[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>