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>
<button id="btnAddText">1 - Add Text</button>
<button id="btnAddCustomText">2 - Add Custom Text</button>
<button id="btnSerializeToJSON">3 - Serialize to JSON</button>
<button id="btnConsoleLogJSON">4 - console.log(json)</button>
<button id="btnClearCanvas">5 - Clear Canvas</button>
<button id="btnRestore">6 - Restore</button>
<canvas id="canvas" width="400" height="400"></canvas>

CSS

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

JavaScript

var json;
var canvas = new fabric.Canvas("canvas");

//////////////////////////////////////////////////////////////
// create CustomText class from Text class
fabric.CustomText = fabric.util.createClass(fabric.Text, {
    type: 'custom-text',
    initialize: function(element, options) {
        this.callSuper('initialize', element, options);
        options && this.set('applicableFonts', options.applicableFonts);
    },
    toObject: function() {
        return fabric.util.object.extend(this.callSuper('toObject'), {applicableFonts: this.applicableFonts});
    }
});    
fabric.CustomText.fromObject = function(object) {
    return new fabric.CustomText(object.text, object);
};
fabric.CustomText.async = false;
//////////////////////////////////////////////////////////////    
$("#btnAddText").click(function(){
    var object = new fabric.Text("NEW TEXT", { 
        fontFamily: "Arial", 
        left: 150,
        top: 100,
        fontSize: 24,
        textAlign: "left",
        fill: "#000000"
    });
    canvas.add(object);
    canvas.renderAll();
});
$("#btnAddCustomText").click(function(){
    var customText = new fabric.CustomText("NEW CUSTOM TEXT", { 
        fontFamily: "Arial", 
        left: 150,
        top: 200,
        fontSize: 24,
        textAlign: "left",
        fill: "#000000",
        applicableFonts: ["Arial", "Times New Roman", "Currier New", "Tahoma"]
    });
    canvas.add(customText);
    canvas.renderAll();
    console.log(customText.toObject());
});

$("#btnSerializeToJSON").click(function(){
   json = JSON.stringify(canvas)
});

$("#btnConsoleLogJSON").click(function(){
    console.log(json);
});

$("#btnClearCanvas").click(function(){
    canvas.clear();
});
    
$("#btnRestore").click(function(){
    canvas.loadFromJSON(json, function(){
        canvas.renderAll();
    });
});