JSFiddle - React, Tailwind, and code Playground

by InferOn

HTML

<canvas id="c" height="400" width="500"></canvas>
<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_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') + 52});
        canvas.add(cl);
               
    }
});