JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
<br />
<input type="text" oninput="change(this.value)" />

JavaScript

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

window.change = function(val) {
  ctx.clearRect(0, 0, c.width, c.height);
  ctx.restore();
  ctx.font = "20px Georgia";
  ctx.fillText(val, 10, 50);
  ctx.save();
}