JSFiddle - React, Tailwind, and code Playground

by swesh

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<canvas id="c"></canvas>

JavaScript

var canvas = new fabric.Canvas('c');
    canvas.renderOnAddRemove = false;
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;	
canvas.setDimensions({width: WIDTH, height: HEIGHT});

canvas.on('object:moving', function(e) {
    var p = e.target;
    console.log(e);
    p.line1 && p.line1.set({ 'x2': p.left, 'y2': p.top });
});

window.requestAnimationFrame(redrawAll);

var line = makeLine([0, 50, 150, 60]);
var circle = makeCircle(line.get('x2'), line.get('y2'), line);
canvas.add(line, circle);

function makeCircle(left, top, line1) {
    var c = new fabric.Circle({
      	left: left,
      	top: top,
      	radius: 7,
      	fill: '#feee00',
      	originX: 'center',
		originY: 'center',
		hoverCursor: null
    });
    c.hasControls = c.hasBorders = false;

    c.line1 = line1;
    return c;
}

function makeLine(coords) {
    return new fabric.Line(coords, {
        fill: 'black',
        stroke: 'black',
        strokeWidth: 4,
        selectable: false,
        originX: 'center',
        originY: 'center'
    });
}

function redrawAll() {
    requestAnimationFrame(redrawAll);
    canvas.renderAll();
    
    //circle.left += 0.1;  
}