Custom Text Object in fabric.js

Custom Text Object

by rodrigopandini

HTML

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

CSS

canvas{
    border-width: 1px;
    border-style: solid;
    border-color: #333;
}

JavaScript

var canvas = new fabric.Canvas("canvas");
var myText = new fabric.Text("NEW TEXT", { 
        fontFamily: "Arial", 
        left: 150,
        top: 100,
        fontSize: 24,
        textAlign: "left",
        fill: "#000000"
    });
canvas.add(myText);
canvas.setActiveObject(myText);
canvas.renderAll();

var w  = myText.currentWidth;
var oldText = myText.text;

//////////////////////////////////////////////////////////////    

$("textarea").keyup(function(){
    myText.text = $(this).val();
    canvas.renderAll();
        
    if(myText.width > w){
         myText.text = oldText;
         canvas.renderAll();
    }
    else{
        
    }
});