JSFiddle - React, Tailwind, and code Playground

by flyingL123

HTML

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" height="300" width="300"></canvas>

JavaScript

function updateDims() {
    var dims = path._parseDimensions(),
        prevDims = path.prevDims || {},
        leftDiff = dims.left - (prevDims.left || 0),
        topDiff = dims.top - (prevDims.top || 0);

    path.setWidth(dims.width);
    path.setHeight(dims.height);
    
    if (dims.left < 0) {
        path.pathOffset.x = path.width/2 + dims.left;
        path.left = path.left + leftDiff;
    } else {
        path.pathOffset.x = path.width/2;
    }
    
    if (dims.top < 0) {
        path.pathOffset.y = path.height/2 + dims.top;
        path.top = path.top + topDiff;
    } else {
         path.pathOffset.y = path.height/2;   
    }
    
    path.prevDims = dims;
    path.setCoords();
}

var canvas = new fabric.Canvas('c');
canvas.backgroundColor = '#f5f5f5';
var path = new fabric.Path('M 0 0',{
    left: 100,
    top: 100,
    stroke: 'black',
    fill: ''
});

canvas.add(path);
debugger;

var commandArray = [];
commandArray[0] = 'Q';
commandArray[1] = 50;
commandArray[2] = 0;
commandArray[3] = 100;
commandArray[4] = 0;

path.path[1] = commandArray;
updateDims();
canvas.renderAll();
debugger;

var commandArray = [];
commandArray[0] = 'Q';
commandArray[1] = 50;
commandArray[2] = 50;
commandArray[3] = -20;
commandArray[4] = 100;

path.path[2] = commandArray;
updateDims();
canvas.renderAll();
debugger;


var commandArray = [];
commandArray[0] = 'Q';
commandArray[1] = 50;
commandArray[2] = 100;
commandArray[3] = 100;
commandArray[4] = 100;

path.path[3] = commandArray;
updateDims();
canvas.renderAll();
debugger;

path.path[0][2] = -20;
updateDims();
canvas.renderAll();
debugger;

path.path[3][4] = 150;
updateDims();
canvas.renderAll();
debugger;

path.path[2][3] = -75;
updateDims();
canvas.renderAll();
debugger;

path.path[1][3] = 150;
updateDims();
canvas.renderAll();