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

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