JSFiddle - React, Tailwind, and code Playground

by brightertools

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(':P', {
			fontSize : 20,
    fontFamily : 'Georgia',top:40,left:200
		}); canvas.add(text1);
  fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';

  function makeCircle(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 makeLine(coords) {
  	return new fabric.Line(coords, {
  		fill : 'red',
  		stroke : 'red',
  		strokeWidth : 5,
  		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),
  	makeCircle(line3.get('x2'), line3.get('y2'), line3),
  	makeCircle(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' : p.left,
  		'y1' : p.top
  	});
  	p.line3 && p.line3.set({
  		'x1' : p.left,
  		'y1' : p.top
  	});
  	p.line4 && p.line4.set({
  		'x1' : p.left,
  		'y1' : p.top
  	});
  	canvas.renderAll();
	      
    y11 = line3.get('y1');
    y12 = line3.get('y2');
    y21 = line4.get('y1');
    y22 = line4.get('y2');
    
    x11 = line3.get('x1');
    x12 = line3.get('x2');
    x21 = line4.get('x1');
    x22 = line4.get('x2');
  
 angle1 = Math.atan2(y11 - y12, x11 - x12);
angle2 = Math.atan2(y21 - y22, x21 - x22);  
      
    angle = angle1 - angle2;  
    angle = angle*180/Math.PI;
    if(angle < 0) angle...