JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas1" width="300" height="300" style="border: 1px solid black;"></canvas>
<br/>
<input id="x1" type="text" value="20"  /><br/>
<input id="y1" type="text" value="20" /><br/>
<input id="x2" type="text" value="55" /><br/>
<input id="y2" type="text" value="180" /><br/>
<input id="myButton" type="button" value="Draw line" />

JavaScript

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

var button = document.getElementById('myButton');
var x1 = document.getElementById('x1');
var y1 = document.getElementById('y1');
var x2 = document.getElementById('x2');
var y2 = document.getElementById('y2');

button.addEventListener('click', function() {
    ctx.beginPath();
    ctx.moveTo(x1.value, y1.value);
    ctx.lineTo(x2.value, y2.value);
    ctx.stroke();
}, false);