JSFiddle - React, Tailwind, and code Playground

HTML

<input type="range" min=".1" max="10" step=.1 value="1" /><br/>
<canvas></canvas>

CSS

input { width: 80%; }

JavaScript

function draw() {
  let ctx = document.querySelector("canvas").getContext("2d");
  let scale = document.querySelector("input").valueAsNumber;

  ctx.resetTransform();
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  ctx.textBaseline = "top";
  ctx.font = (16/scale) + "px sans-serif";
  
  ctx.scale(scale, scale);
  
  ctx.fillText(ctx.font, 0, 0);
}
document.querySelector("input").oninput = draw;
draw();