<div class="wrap">
  <canvas id="canvas" width="900" height="300"></canvas>
  <form id="form">
    <label>font</label>
    <input id="font" value="48px serif"/>
    <label>text</label>
    <input id="text" value="Hello World"/>
    <label>x</label>
    <input type="range" id="x" name="x" min="0" max="300" value="36"/>
    <label>y</label>
    <input type="range" id="y" name="y" min="0" max="100" value="63"/>
    <label>maxWidth</label>
    <input type="range" id="maxWidth" name="maxWidth" min="0" max="900" value="900"/>
  </form>
</div>

.wrap {
  display: flex;
  flex-direction: column;
}
#canvas {
  width: 300px;
  height: 100px;
  border: solid 1px #000;
  margin: auto;
  margin-bottom: 10px;
}
form {
  display: flex;
  flex-direction: column;
}
input, label {
  margin-top: 10px;
  width: 300px;
  margin: auto;
}

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.scale(3,3);
// ctx.font = "48px serif";
// ctx.fillText("Hello world", 50, 100);
const paint = (ctx) => {
  ctx.clearRect(0, 0, 300, 300);
  const font = document.getElementById('font').value;
  const text = document.getElementById('text').value;
  const x = document.getElementById('x').value;
  const y = document.getElementById('y').value;
  const maxWidth = document.getElementById('maxWidth').value;
  ctx.font = font;
  ctx.fillText(text, parseInt(x), parseInt(y), parseInt(maxWidth));
  ctx.font = '15px sans';
  ctx.fillText(`x:${x} y:${y} maxWidth:${maxWidth}`, 10, 90);
}
const form = document.getElementById("form");
paint(ctx);
form.addEventListener('input', () => paint(ctx));