JSFiddle - React, Tailwind, and code Playground

by swesh

HTML

<script src="https://250mils-transfer.s3.amazonaws.com/fabric04212015.js"></script>
<canvas id="c" width="600" height="600"></canvas>

CSS

canvas {
    border: 1px solid #999;
}

JavaScript

var canvas = window._canvas = new fabric.Canvas('c');
canvas.on({
        
        'object:scaling': onScaling,
        'object:moving': onObjectMoving
});
function onObjectMoving() {
    console.log(this._activeObject.top);
   console.log(this._activeObject.left);
  
}

function onScaling() {
    console.log(this._activeObject.width);
   console.log(this._activeObject.scaleY);
   
}
var t1 = new fabric.Textbox('Left Aligned: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat metus eget felis tincidunt, et pretium lorem pellentesque.', {
    width: 200,
    height: 200,
    top: 5,
    left: 5,
    fontSize: 16,
    textAlign: 'left'
});

var t2 = new fabric.Textbox('Center Aligned: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat metus eget felis tincidunt, et pretium lorem pellentesque.', {
    width: 200,
    height: 200,
    top: 5,
    left: 300,
    fontSize: 16,
    textAlign: 'center'
});

var t3 = new fabric.Textbox('Justified: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat metus eget felis tincidunt, et pretium lorem pellentesque.', {
    width: 200,
    height: 200,
    top: 250,
    left: 5,
    fontSize: 16,
    textAlign: 'justify'
});

var t4 = new fabric.Textbox('Right Aligned: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat metus eget felis tincidunt, et pretium lorem pellentesque.', {
    width: 200,
    height: 200,
    top: 250,
    left: 300,
    fontSize: 16,
    textAlign: 'right',
    lineHeight: 2
});
var grp = new fabric.Group([t1, t2, t3]);
//canvas.add(t1);
//canvas.add(t2);
canvas.add(grp);
canvas.add(t4);
t3.setText("hjud")
canvas.renderAll();