const element = document.getElementById('canvas');

const canvas = new CanvasBuilder(element)
  .setDefaults({
    edges: {
      shape: {
        arrowRenderer: {
          type: "triangle",
          radius: 7,
        }
      }
    }
  })
  .build();

  

    
const arrowRenderer = (renderingParams) => {
  const length = renderingParams.arrowLength;

  const arrowPoints = [
    { x: 4, y: 0 },
    { x: length, y: 10 },
    { x: length, y: -10 },
  ];

  const dir = renderingParams.direction;
  const shift = renderingParams.shift;

  const points = arrowPoints.map((point) => ({
    x: dir.x * point.x - dir.y * point.y + shift.x,
    y: dir.y * point.x + dir.x * point.y + shift.y,
  }));

  const move = `M ${points[0].x} ${points[0].y}`;
  const line1 = `L ${points[1].x} ${points[1].y}`;
  const line2 = `L ${points[2].x} ${points[2].y}`;

  return `${move} ${line1} ${line2} Z`;
};