Untitled

<!doctype html>
<html>
<head></head>
<body>
    <canvas id="cnv" width="600" height="400" style="border: 1px solid black"></canvas>
    <br>
    <input type="number" id="x1">
    <input type="number" id="y1">
    <input type="number" id="x2">
    <input type="number" id="y2">
    <br>
    <br>
    <input type="button" id="drawBtn" value="Draw">
    <input type="button" id="clearCanvasBtn" value="Clear canvas">
    <label for="clearCanvasChk">Clear canvas on draw?</label>

    <input type="checkbox" id="clearCanvasChk">
    <script type="text/javascript">
        var canvas = document.getElementById('cnv');
        var ctx = canvas.getContext('2d');
        var btn = document.getElementById('drawBtn');
        var clearBtn = document.getElementById('clearCanvasBtn');

        // Drawing on canvas
        btn.addEventListener('click', function() {
            // Get points values
            var x1 = document.getElementById('x1').value;
            var y1 = document.getElementById('y1').value;
            var x2 = document.getElementById('x2').value;
            var y2 = document.getElementById('y2').value;
            var shouldClearCanvas = document.getElementById('clearCanvasChk').checked;

            // Point 1 coordinates
            var point1 = {
                x: Number(x1),
                y: Number(y1)
            };
            var point2 = {
                x: Number(x2),
                y: Number(y2)
            };

            if (shouldClearCanvas === true) {
                clearCanvas();
            }

            // Draw line
            drawLine(point1, point2);
        });

        // Clear canvas
        clearBtn.addEventListener('click', clearCanvas);

        function drawLine(point1, point2) {
            ctx.beginPath();
            ctx.moveTo(point1.x, point1.y);
            ctx.lineTo(point2.x, point2.y);
            ctx.stroke();
        }

        function clearCanvas() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }
    </script>
</body>
</html>