JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://fabricjs.com/lib/fabric.js"></script>
 
<canvas id="canvas" width="300" height="300"></canvas>
<input id='text' type='text' value='type more text'/>

CSS

canvas{ border: 1px solid #000;}

JavaScript

var canvas =  new fabric.Canvas('canvas');

    var textWidth = 0.9 * canvas.getWidth();
    var textHeight = 0.25 * canvas.getHeight();

    var text = document.getElementById('text').value;
    var textSample = new fabric.Text(text, {
    fontFamily: 'Impact',
    top: textHeight / 1.5,
    left: canvas.getWidth() / 2.0,
    width: textWidth,
    height: textHeight,
    scaleX: 1.0,
    scaleY: 1.0,
    lineHeight: 1.0,
    fill:'black'
    });
    canvas.add(textSample);
    canvas.renderAll();

  document.getElementById('text').oninput = function(){
    textSample.setText(document.getElementById('text').value);
      
    if (textSample.width > canvas.width*0.9) {
    textSample.scaleX = canvas.width*0.9/textSample.width;
    textSample.scaleY = textSample.scaleX;
    }
    else {
    textSample.scaleX = '1.0';
    textSample.scaleY = textSample.scaleX;    
    }
      
    if (textSample.scaleX < 0.7) {
    textSample.scaleX = 0.7;
    textSample.scaleY = textSample.scaleX;
    var str = document.getElementById('text').value;
    textSample.setText(str + '\n');
    }  
      
      
    canvas.renderAll();
  };