JSFiddle - React, Tailwind, and code Playground

by InferOn

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.8/fabric.min.js"></script>
<body>
    <div>
        <canvas id="c"></canvas>
    </div>
    <div class="buttons">
        <button onclick="saveCanvas();" id="serialize">Serialize</button>
    </div>
    <div id="output">
        <p>Serialized output</p>
    </div>
</body>

CSS

* {
    box-sizing: border-box;
}

canvas {
    border: 1px solid #000000;
}

.buttons {
    margin-top: 0.5em;
}

#output p {
    margin-top: 1em;
    min-height: 30px;
    padding: 6px;
    font-size: 13px;
    border: 1px solid #dfdfdf;
    width: 450px;
    word-wrap: break-word;
}

JavaScript

fabric.ConnectorLine = fabric.util.createClass(fabric.Line, {
    initialize: function (points, options) {
        options || (options = {});
        recursionCount = 0;
        this.callSuper('initialize', points, options);
        options &&
            this.set('type', 'connector') &&
            this.set('end1', options.end1) &&
            this.set('arrow', options.arrow)
    },
    toObject: function () {
        if (recursionCount > 100) return;
        recursionCount++;
        return fabric.util.object.extend(this.callSuper('toObject'), {
            type: this.type,
            end1: this.end1,
            arrow: this.arrow
        });
    }
});

    fabric.ConnectorEnd = fabric.util.createClass(fabric.Rect, {
      
      initialize: function (options) {
        options || (options = {});
        this.callSuper('initialize', options);
        recursionCount = 0;
        options &&
            this.set('type', 'connector-end') &&
            this.set('line', options.line) &&
            this.set('attachedTo', options.attachedTo) &&
            this.set('attachedPos', options.attachedPos)
      },
      toObject: function () {
        if (recursionCount > 100) return;
        recursionCount++;
        return fabric.util.object.extend(this.callSuper('toObject'), {
          type: this.type,
          line: this.line,
          attachedTo: this.attachedTo,
          attachedPos: this.attachedPos
        });
      }
    });

    fabric.ConnectorArrow = fabric.util.createClass(fabric.Triangle, {
      initialize: function (options) {
        options || (options = {});
        this.callSuper('initialize', options);
        recursionCount = 0;
        options &&
            this.set('type', 'connector-arrow') &&
            this.set('line', options.line) &&
            this.set('attachedTo', options.attachedTo) &&
            this.set('attachedPos', options.attachedPos)
      },
      toObject: function () {
        if(recursionCount > 100) return;
       ...