Text Dynamic Resize

Dymanic resize the text according with the width. Resize the text setting a small fontSize value.

by rodrigopandini

HTML

<script src="https://raw.github.com/kangax/fabric.js/master/dist/all.js"></script>
<textarea id="textArea"></textarea>
<br/>
<canvas id="c" width="600" height="400"></canvas>

CSS

canvas{
  border-width: 1px;
  border-style: solid;
  border-color: #000;
  margin: 5px; 
}

JavaScript

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

var rect = new fabric.Rect({
  stroke: '#000000',
  strokeWidth: 1,
  fill: false,
  top: 200,
  left: 300,
  width: 473,
  height: 52,
  angle: 30,
  selectable: false
});
canvas.add(rect);

var text = new fabric.Text("Texto com dimensões 473x52", {
  fill: '#000000',
  top: 200,
  left: 300,
  angle: 30
});
canvas.add(text);

canvas.renderAll();

var oldText = text.get("text");
var start = 0;
$("#textArea").keyup(function(evt){
  oldText = text.get("text");
  text.set("text", this.value);
  
  if(text.get("width") > 473 || text.get("height") > 52){
    
    if(text.get("fontSize") > 12){
      text.set("fontSize", text.get("fontSize") - 1);
    }
    else{
      text.set("fontSize", 12);
      text.set("text", oldText);
    }
      
  }
  else  if(text.get("width") <= 473 || text.get("height") <= 52){
    
    if(text.get("fontSize") < 12){
      text.set("fontSize", text.get("fontSize") + 1);
    }
    else{
      text.set("fontSize", 12);
      //text.set("text", oldText);
    }
      
  }
  
  canvas.renderAll();    
});