JSFiddle - React, Tailwind, and code Playground

by Steve Eberhardt

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 : true
  	});

  
  fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';

  
  function makeCircle(left, top, line1, line2, text1) {
   var c = new fabric.Circle({
      left: left,
      top: top,
      strokeWidth: 5,
      radius: 12,
      fill: '#fff',
      stroke: '#666'
    });
    c.hasControls = c.hasBorders = false;
  	c.line1 = line1;
  	c.line2 = line2;
  	return c;
  }

  function makeLine(coords) {
  	return new fabric.Line(coords, {
  		fill : 'red',
  		stroke : 'red',
  		strokeWidth : 5,
  		selectable : false
  	});
  }
  
  var line1 = makeLine([250, 175, 250, 250]),
  line2 = makeLine([250, 250, 400, 250]);

   canvas.add(line2);

var text1 =  new fabric.Text(':P', { 
  left: line2.left, //
  top: line2.top - 20, 
  fill: 'red',
  selectable: false
  })
canvas.add(text1);

var c1 = makeCircle(line1.get('x2'), line1.get('y2'), line1, line2,text1);
var c2 = makeCircle(line2.get('x2'), line2.get('y2'), line2, text1);

  canvas.add(
		c1,
  	c2);
    let group = new fabric.Group([line2, text1, c1, c2]);
//let group = new fabric.Group([line2, text1, c1, c2]);
			canvas.add(group);
  
  canvas.on({
    'mouse:down': function(e) {
    return false;
    if (!e.target.line2) { 
    var hasGroup = false;
     var objs = canvas.getObjects().map(function(o) {
 			if(o.type == "group") {
      hasGroup = true;
      }
});
   //  console.log(objs);
     if(hasGroup) { 
     console.log("group");



canvas.discardActiveObject();
    canvas.discardActiveGroup();

canvas.renderAll();

     } else {
     console.log("no group");
     //let group = new fabric.Group([line2, text1, c1, c2]);
     // canvas.add(group);
     // canvas._activeObject = null;
      //canvas.setActiveGroup(group).renderAll();
     }
   }
   
    //  if (!e.target.line2) {
     // let group = new fabric.Group([line2, text1, c1, c2]);
    // canvas.remove(group);
    //...