JSFiddle - React, Tailwind, and code Playground

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') + 150
});
text.set({
    left: text.get('left') + 200
});
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);

    }
});