JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td>&nbsp;&nbsp;&nbsp;&nbsp;x1: <span id="variavel_x"></span>

        </td>
        <td>y1: <span id="variavel_y"></span>

        </td>
    </tr>
    <tr>
        <td>
            <input type="range" style="width: 180px;" name="x" id="valorX" min="0" max="375" oninput="altera(this.value,this.name)">
        </td>
        <td>
            <input type="range" style="width: 180px;" name="y" id="valorY" min="0" max="500" oninput="altera(this.value,this.name)">
        </td>
    </tr>
    <tr>
        <td>&nbsp;&nbsp;&nbsp;&nbsp;x2: <span id="variavel_x1"></span>

        </td>
        <td>y2: <span id="variavel_y1"></span>

        </td>
    </tr>
    <tr>
        <td>
            <input type="range" style="width: 180px;" name="x1" id="valorX1" min="0" max="375" oninput="altera(this.value,this.name)">
        </td>
        <td>
            <input type="range" style="width: 180px;" name="y1" id="valorY1" min="0" max="500" oninput="altera(this.value,this.name)">
        </td>
    </tr>
</table>
<canvas id="myCanvas" width="375" height="500"></canvas>

JavaScript

function altera(valor, ponto) {
    document.getElementById('variavel_' + ponto).innerHTML = valor;

    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    desenhaBase(context, canvas);
}

function desenhaBase(context, canvas) {
    X = document.getElementById('valorX').value;
    Y = document.getElementById('valorY').value;
    X1 = document.getElementById('valorX1').value;
    Y1 = document.getElementById('valorY1').value;
    context.fillStyle = "white";
    context.beginPath();
    context.fillRect(0, 0, canvas.width, canvas.height);
    context.fill();

    context.moveTo(X, canvas.height - Y);
    context.lineTo(X1, Y1);
    context.strokeStyle = 'blue';
    context.stroke();
}