JSFiddle - React, Tailwind, and code Playground

HTML

Type: <input>
<br>
<canvas width="400" height="400" id="cv"></canvas>

JavaScript

var ctx = $('#cv').get(0).getContext('2d');

$("input").on("input", function() {
    var text = $(this).val();
    ctx.font = "30pt Arial";
    ctx.clearRect(0, 0, 400, 400);
    var width = ctx.measureText(text).width;
    if(width <= 100) {
        ctx.fillText(text, 0, 100);
    } else {
        ctx.save();
        ctx.scale(100 / width, 1);
        ctx.fillText(text, 0, 100);
        ctx.restore();
    }
});