JSFiddle - React, Tailwind, and code Playground

HTML

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

<input type="text" id='backtext'/>

JavaScript

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

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

fabric.MyText = fabric.util.createClass(fabric.Text, {
    type: 'MyText',
    initialize: function(text, options) {
        options || (options = { });
        this.callSuper('initialize', text, options);
        this.set('texttype', options.texttype || 0);
    },
    
    toObject: function() {
        return fabric.util.object.extend(this.callSuper('toObject'), {
            texttype: this.get('texttype')
        });
    },
    
    _render: function (ctx) {
        this.callSuper('_render', ctx);
    }
});



fabric.MyText.fromObject = function(object) {
    return new fabric.MyText(object.text, fabric.util.object.clone(object));
};


fabric.MyImage = fabric.util.createClass(fabric.Image, {
    type: 'MyImage',
    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){
       ...