JSFiddle - React, Tailwind, and code Playground

by MagicLegend

HTML

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

CSS

canvas {
  border: 1px solid #999;
}

JavaScript

// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c');

canvas.selection = false;

var headlen = 15; // arrow head size

function drawArrow(fromx, fromy, tox, toy, color, originX, originY) {
  fromx = fromx - 50;
  tox = tox - 50;
  var angle = Math.atan2(toy - fromy, tox - fromx);

  // bring the line end back some to account for arrow head.
  tox = tox - (headlen) * Math.cos(angle);
  toy = toy - (headlen) * Math.sin(angle);

  // calculate the points.
  var points = [{
    x: fromx, // start point
    y: fromy
  }, {
    x: fromx - (headlen / 4) * Math.cos(angle - Math.PI / 2),
    y: fromy - (headlen / 4) * Math.sin(angle - Math.PI / 2)
  }, {
    x: tox - (headlen / 4) * Math.cos(angle - Math.PI / 2),
    y: toy - (headlen / 4) * Math.sin(angle - Math.PI / 2)
  }, {
    x: tox - (headlen) * Math.cos(angle - Math.PI / 2),
    y: toy - (headlen) * Math.sin(angle - Math.PI / 2)
  }, {
    x: tox + (headlen) * Math.cos(angle), // tip
    y: toy + (headlen) * Math.sin(angle)
  }, {
    x: tox - (headlen) * Math.cos(angle + Math.PI / 2),
    y: toy - (headlen) * Math.sin(angle + Math.PI / 2)
  }, {
    x: tox - (headlen / 4) * Math.cos(angle + Math.PI / 2),
    y: toy - (headlen / 4) * Math.sin(angle + Math.PI / 2)
  }, {
    x: fromx - (headlen / 4) * Math.cos(angle + Math.PI / 2),
    y: fromy - (headlen / 4) * Math.sin(angle + Math.PI / 2)
  }, {
    x: fromx,
    y: fromy
  }];

  var pline = new fabric.Polyline(points, {
    fill: color, // "#AB12D3" testing colour
    stroke: "#000",
    opacity: 1,
    strokeWidth: 1,
    selectable: false,
    hasControls: false,
  });
  return pline;
}

function drawCircle() {
  let ccircle = new fabric.Circle({
    fill: "blue",
    hasControls: false,
    hoverCursor: "default",
    lockMovementX: true,
    lockMovementY: true,
    originX: "center", // Causes problems; see https://stackoverflow.com/a/8812393
    originY: "center",
    selectable:...