JSFiddle - React, Tailwind, and code Playground

by Ashish Kasama

HTML

<script src="//fabricjs.com/lib/fabric.js"></script>
<canvas id="optioncanvas">
 </canvas>
<input type="hidden" id='fronttext' value="front"/>

<input type="hidden" id='backtext' value="back"/>

<input type="button" id='selecttext' value="selectText"/>

JavaScript

fabric.Object.prototype.hide = function() {
    this.setVisible(false);
};

fabric.Object.prototype.show = function() {
    this.setVisible(true);
};

fabric.MyImage = fabric.util.createClass(fabric.Image, {
    type: 'Image',
    initialize: function (element, options) {
        options || (options = { });
        this.callSuper('initialize', element, options);
        this.set('imgtype', options.imgtype || 0);
    },
    
    toObject: function() {
        return fabric.util.object.extend(this.callSuper('toObject'), {
            imgtype: this.get('imgtype')
        });
    },
    
    _render: function (ctx) {
        this.callSuper('_render', ctx);
    }
});


fabric.MyImage.fromURL = function(url, callback, imgOptions) {
    fabric.util.loadImage(url, function(img) {
        callback && callback(new fabric.MyImage(img, imgOptions));
    }, null);
};

fabric.MyImage.fromObject = function(object, callback) {
    fabric.util.loadImage(object.src, function(img) {
        callback && callback(new fabric.MyImage(img, object));
    });
};
fabric.MyImage.async = true;

var canvastextobjectfront;

var fronttext = null;
var backtext = null;
var frontimg = null
var backimg = null;
var optiontype = 0;
var optiontypeText= "Object";


function resetCanvas(){
    
    if(canvastextobjectfront){
        canvastextobjectfront.clear();
    }
    else{
        var w = 300;
        $('#canvasBox').height(w);
        $('#optioncanvas').width(w);
        $('#optioncanvas').height(w);
        canvastextobjectfront = new fabric.Canvas('optioncanvas', {    
            selectionColor: '#ddd',
            selectionLineWidth: 1  
        });
        canvastextobjectfront.setHeight(w);
        canvastextobjectfront.setWidth(w);
    }
    
}
resetCanvas();
var imgurl = "http://lavender-sandbox.myshopify.com/apps/lavender/imageserver/img_55a6c78f15d9b.jpg";


fabric.MyImage.fromURL(imgurl, function(oImg) {
    frontimg = oImg;
    oImg.set({
        left: 0,
        top: 0        
   ...