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

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

text.set({top: text.get('top') + 100});
text.set({left: text.get('left') + 100});
canvas.add(text);

document.getElementById('clone_left').addEventListener('click', function (e) {
    var obj = canvas.getActiveObject();
    if (obj.type == 'i-text') {
        var cl = fabric.util.object.clone(obj);
        cl.set('flipY', true);	
        cl.set({left: cl.get('left') - text.width});
        
        canvas.add(cl);
               
    }
});

document.getElementById('clone_right').addEventListener('click', function (e) {
    var obj = canvas.getActiveObject();
    if (obj.type == 'i-text') {
        var cl = fabric.util.object.clone(obj);
        cl.set('flipY', true);	
        cl.set({left: cl.get('left') + text.width});
        
        canvas.add(cl);
               
    }
});

document.getElementById('clone_bottom').addEventListener('click', function (e) {
    var obj = canvas.getActiveObject();
    if (obj.type == 'i-text') {
        var cl = fabric.util.object.clone(obj);
        cl.set('flipY', true);
        cl.set({top: cl.get('top') + text.height});
        canvas.add(cl);
               
    }
});
document.getElementById('clone_top').addEventListener('click', function (e) {
    var obj = canvas.getActiveObject();
    if (obj.type == 'i-text') {
        var cl = fabric.util.object.clone(obj);
        cl.set('flipY', true);
        cl.set({top: cl.get('top') - text.height});
        canvas.add(cl);
               
    }
});