JSFiddle - React, Tailwind, and code Playground

by Arvind Pal

HTML

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<div  id="canvas-wrapper" style="position:relative;width:704px;float:left;">
    <canvas id="canvas" width="700" height="600" style="border:1px solid #000000;"></canvas>
</div>

JavaScript

var canvas = new fabric.Canvas('canvas');

fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';
document.getElementById("canvas").tabIndex = 1000;

fabric.LineWithPoints = fabric.util.createClass(fabric.Line, {
    initialize: function (points, options)
    {
        options || (options = {});
        this.callSuper('initialize', points, options);
        options &&
            this.set('type', options.type),
            this.set('name', options.name),
            this.set('start_point', options.start_point),
            this.set('end_point', options.end_point),
            this.set('current_x',  options.current_x),
            this.set('current_y', options.current_y)
    },
    //has to be called for save and load
    toObject : function() {
        return fabric.util.object.extend(this.callSuper('toObject'), {
            start_point: this.get('start_point'),
            end_point:   this.get('end_point'),
            name:        this.get('name'),
            current_x:   this.get('current_x'),
            current_y:   this.get('current_y')
        });
    }
});

fabric.LinePoint = fabric.util.createClass(fabric.Circle, {
    initialize: function (options) {
        options || (options = {});
        this.callSuper('initialize', options);
        options &&
        this.set('x', this.left),
        this.set('y', this.top)
    },
    //has to be called for save and load
    toObject : function() {
        return fabric.util.object.extend(this.callSuper('toObject'), {
            x: this.get('x'),
            y: this.get('y'),
            name: this.get('name')
        });
    },
    saySth: function() {
    console.log("STH");
    }
});

var line = new fabric.LineWithPoints([15, 15, 75, 15], {
        stroke:             'black',
        strokeWidth:        4,
        type:               'line',
        name:               ('line_1'),
        left:								40,
        top:								15,
        current_x:					40,
        current_y:					15
 ...