Text Dynamic Resize

Dymanic tesize the text according with the width. Break the line with '\n'.

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,
  selectable: false
});
canvas.add(rect);

var text = new fabric.Text("Texto com dimensões 473x52", {
  fill: '#000000',
  top: 200,
  left: 300
});
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){
    
    start = text.get("text").lastIndexOf(" ", start);
    var tempText = text.get("text").replace(" ", "\n", start);
    console.log(start, tempText[tempText.length - 1]);
    text.set("text", tempText);
      
  }
    
  canvas.renderAll();    
});