JSFiddle - React, Tailwind, and code Playground

by Manuel Rodriguez

HTML

<canvas id="c" width="500" height="500" style="border:1px solid #ccc"></canvas>

JavaScript

(function () {
 		var canvas = this.__canvas = new fabric.Canvas('c', {
 				selection : false
 			});
		var text1 = new fabric.Text('0', {
 				fontSize : 14,
 				fontFamily : 'Arial',
 				originX: 'center',
				originY: 'bottom'
 			});
 		fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';

 		function makeTriangle(left, top, line1, line2, line3, line4) {
 			var c = new fabric.Triangle({
 					left : left,
 					top : top,
 					strokeWidth : 5,
 					fill : '#fff',
 					stroke : '#666',
 					angle : -180,
 					width : 10,
 					height : 10
 				});
 			c.hasControls = c.hasBorders = false;

 			c.line1 = line1;
 			c.line2 = line2;
 			c.line3 = line3;
 			c.line4 = line4;

 			return c;
 		}
 		function makeCircle(left, top, line1, line2, line3, line4) {

 			var c = new fabric.Circle({
 					strokeWidth : 1,
 					fill : '',
 					stroke : '#666',
 					radius : 18,
 					width : 10,
 					height : 10,
					originX: 'center',
					originY: 'center'
 				});
			
 		

 		var group = new fabric.Group([text1, c], {
 				left : left,
 				top : top
 		});
 			group.hasControls =  false;

 			group.line1 = line1;
 			group.line2 = line2;
 			group.line3 = line3;
 			group.line4 = line4;

 			return group;
 		}
 		function makeLine(coords) {
 			return new fabric.Line(coords, {
 				fill : 'red',
 				stroke : 'red',
 				strokeWidth : 2,
 				selectable : false
 			});
 		}

 		var line2 = makeLine([250, 175, 250, 250]),
 		line3 = makeLine([250, 250, 300, 350]),
 		line4 = makeLine([250, 250, 200, 350]);

 		canvas.add(line3, line4);
 		

 		
 		canvas.add(

 			makeCircle(line2.get('x2'), line2.get('y2'), line2, line3, line4),
 			makeTriangle(line3.get('x2'), line3.get('y2'), line3),
 			makeTriangle(line4.get('x2'), line4.get('y2'), line4));

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