JSFiddle - React, Tailwind, and code Playground

by Andrea Bogazzi

HTML

<script src="https://unpkg.com/[email protected]/dist/fabric.min.js"></script>
<canvas id="c" width="600" height="600"></canvas>

JavaScript

let canvas, text, multipleSelectionInProgress;
        $(document).ready(function () {
            (function() {
  var line;
  var canvas = this.__canvas = new fabric.Canvas('c');
  fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';

  canvas.on({
    'object:moving': onObjectMoving,
    'object:rotating': onObjectMoving
  });

  line = new fabric.Path('M 0 0 Q 100, 100, 200, 0', {
    fill: '',
    stroke: 'black',
    name: 'line',
    hasControls: false,
    hasBorders: false,
    objectCaching:false
  });

    var text = new fabric.IText('Path Text', {
        name: 'text',
        fontSize: 32,
        fontFamily: 'Arial',
        left: 100,
        top: 100,
        fill: '#000',
        textAlign: 'center',
        objectCaching: false,
        path: line,
        pathSide: "left",
        pathStartOffset: 0,
        pathAlign: 'center', // baseline/center/ascender/descender
        objectType: 'text',
        //centeredScaling: true,
        originX: 'left',
        originY: 'top',
        // originX: 'center',
        // originY: 'center',
        angle: 0,
        //seletable: false,
        //evented: false
    });

  canvas.add(text);
  canvas.renderAll();

  var transformPath = fabric.util.transformPath(text.path.path, text.calcTransformMatrix());
  var p1 = makeCurveCircle(transformPath[1][1], transformPath[1][2], null, line, null)
  p1.name = "p1";
  canvas.add(p1);

  var p0 = makeCurveCircle(transformPath[0][1], transformPath[0][2], line, p1, null, true);
  p0.name = "p0";
  canvas.add(p0);

  var p2 = makeCurveCircle(transformPath[1][3], transformPath[1][4], null, p1, line);
  p2.name = "p2";
  canvas.add(p2);

  function makeCurveCircle(left, top, line1, line2, line3, dup) {
    var c = new fabric.Circle({
        left: left - text.path.width / 2,
        top: top - text.path.height / 2,
      strokeWidth: 5,
      radius: 12,
      fill: '#fff',
      stroke: '#666'
    });

    c.hasBorders = c.hasControls =...