JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body>
        <form NAME="SENDX" ACTION="" METHOD="GET">
            Enter X: <INPUT TYPE="number" NAME="xx">
            <input type="button" value="ENTER CO-ORDINATES" onclick="sendVal(this.form)">
        </form>
        <canvas id="myCanvas" width="500" height="500"></canvas>
    </body>
</html>

JavaScript

var canvas;
var context;
var _x = 0;

function draw(newx) {
    context.rect(newx,100,100,100)
    context.strokeStyle = "red"
    context.stroke()
}

function sendVal(form) { 
    _x = form.xx.value;
    context.clearRect(0,0,canvas.width,canvas.height);
    draw(_x);
}

window.onload = function() {
    canvas = document.getElementById("myCanvas");
    context = canvas.getContext("2d");
    context.rect(_x,100,100,100);
    context.strokeStyle = "blue";
    context.stroke();
};