JSFiddle - React, Tailwind, and code Playground

by InferOn

HTML

<canvas  id="c" height="400" width="500"></canvas>
<button id="clone_left" name="left">Left</button>
<button id="clone_right" name="right">right</button>
<button id="clone_top" name="top">top</button>
<button id="clone_bottom" name="bottom">bottom</button>

CSS

canvas{
    border:1px solid gray;;
}

JavaScript

//Using i-text

var canvas = new fabric.Canvas('c');
var text = new fabric.IText('Sample', {
    left: 100,
    top: 100,
    fill: 'red'
});
 canvas.add(text); 

document.getElementById('clone_left').addEventListener('click', function (e) {
 var obj = canvas.getActiveObject();
       
  if(obj.type=='i-text')
  {
        if (fabric.util.getKlass(obj.type).async) {
            obj.clone(function (clone) {
               clone.set({left: clone.get('left') + 210});
                canvas.add(clone);
            });
        } else {
            //alert("else");
            var clone = obj.clone();
            
          //lone.set({left: clone.get('left') + 370});
		  clone.set("angle", "180").set('flipY', true);	
		 clone.set({top: clone.get('top') + 52});
          canvas.add(clone);
            canvas.renderAll();
        
        } 
  
  } 

});


document.getElementById('clone_right').addEventListener('click', function (e) {
 var obj = canvas.getActiveObject();
       
  if(obj.type=='i-text')
  {
        if (fabric.util.getKlass(obj.type).async) {
            obj.clone(function (clone) {
			   
               clone.set({left: clone.get('left') + 210});
			   clone.set("angle", "180").set('flipY', true);
                canvas.add(clone);
				//alert("if");
            });
        } else {
          //  alert("else right");
            var clone = obj.clone();

          clone.set({left: clone.get('left') + 250});
		  clone.set("angle", "180").set('flipY', true);	
		  clone.set({top: clone.get('top') + 52});
		
          canvas.add(clone);
		 
        
        } 
     } 

});

document.getElementById('clone_top').addEventListener('click', function (e) {
 var obj = canvas.getActiveObject();
  if(obj.type=='i-text')
  {
        if (fabric.util.getKlass(obj.type).async) {
            obj.clone(function (clone) {
			  clone.set("angle", "180").set('flipX', true);
              clone.set({top: clone.get('top') - 135});
                canvas.add(clone);
           ...