JSFiddle - React, Tailwind, and code Playground

by Steve Eberhardt

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/500/fabric.min.js"></script>
<canvas id="canvas" width="700" height="700"></canvas>

JavaScript

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

function selectionChanged(e){
	if(e.deselected) {
    e.deselected.map( o => {
      if(o.type.indexOf('text') > -1 && o.path){
        o.path.visible = false
      }
    })
  }
  if(e.selected) {
    e.selected.map( o => {
    	o.fill = '#f60'
      if(o.type.indexOf('text') > -1 && o.path){
        o.path.visible = true
      }
    })
  }
  canvas.renderAll()
}

var text = new fabric.Text("This is a text that follows the line",{
	id:'text_id_1234',
  top : 100,
  left : 100,
  fill : 'red',
  fontSize: 40,
  textAlign: 'center',
  fontFamily: "Arial",
  pathAlign: 'descender',
  shadow: new fabric.Shadow({
  	color: 'black',
    offsetX: 3,
    offsetY: 3,
    blur: 2
  }),
  path: new fabric.Path("M 0 0 C 180 0, 0 360, 480 180",
  	{
    	strokeWidth: 3,
    	fill: null,
      //stroke: "#f60",
      visible: false,
     }
   )
});

canvas.on({
	'selection:created': (e) => {
  	selectionChanged(e)
  },
  'selection:updated': (e) => {
  	selectionChanged(e)
  },
  'selection:cleared': (e) => {
  	selectionChanged(e)
  },
  'mouse:over': function(e) {
    if(e.target && e.target.type.indexOf('text') > -1){
      selectionChanged({selected: [e.target]})
    }
  },
  'mouse:out': function(e) {
    if(e.target && e.target.type.indexOf('text') > -1 && !canvas.getActiveObject() || canvas.getActiveObject().id !== e.target.id){
      selectionChanged({deselected: [e.target]})
    }
  }
})

canvas.add(text);

canvas.renderAll();

canvas.on('after:render', function() {
  this.contextContainer.strokeStyle = 'red';
  this.forEachObject(function(obj) {
    if(obj.type == 'text' && obj.path && obj.path.visible) {
      var center = obj.getCenterPoint();
      canvas.contextContainer.translate(center.x, center.y);
      obj.path._render(canvas.contextContainer);
      canvas.contextContainer.stroke();
      canvas.contextContainer.translate(-center.x, -center.y);
    }
  });
});