JSFiddle - React, Tailwind, and code Playground

HTML

<label>X: </label><input type="number" id="x">
<label>Y: </label><input type="number" id="y">
<input type="button" id="move" value="MOVE">
<canvas id="canvas" width=600 height=400></canvas>

CSS

#canvas {
  border: 1px solid black;
}

JavaScript

var x = 100;
var y = 50;
var r = 10;

var WIDTH = 600;
var HEIGHT = 400;

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

function circle(x, y, r) {
  ctx.beginPath();
  ctx.arc(x, y, r, 0, Math.PI * 2, true);
  ctx.fill();
}

function clear() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
}

function draw() {
  clear(WIDTH, HEIGHT);
  ctx.fillStyle = "purple";
  circle(x, y, r);
}

draw();