Custom Text Object in fabric.js

Custom Text Object

HTML

<script src="https://raw.github.com/kangax/fabric.js/master/dist/all.js"></script>
<button id="btnAddText">Add Text</button>
<button id="btnAddCustomText">Add Custom Text</button>
<button id="btnSerializeAndClear">Serialize and Clear</button>
<button id="btnRestore">Restore</button>
<canvas id="canvas" width="400" height="400"></canvas>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>

JavaScript

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

// 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);
};
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 object = new fabric.Text("NEW CUSTOM TEXT", { 
        fontFamily: "Arial", 
        left: 150,
        top: 200,
        fontSize: 24,
        textAlign: "left",
        fill: "#000000"
    });
    var customText = new fabric.CustomText(object, {applicableFonts: ["Arial", "Times New Roman"]});
    canvas.add(customText);
    canvas.renderAll();
});

$("#btnSerializeAndClear").click(function(){
   json = JSON.stringify(canvas)
   canvas.clear(); 
   console.log(json);
});

$("#btnRestore").click(function(){
    canvas.loadFromJSON(json, function(){
        canvas.forEachObject(function(object){
            console.log(object.applicableFonts);
        });
        canvas.renderAll();
        console.log(JSON.stringify(canvas));
    });
});