How to use the fabric.fabric.Path function in fabric

export default (width, height, viewPort) => {
  const overlay = new fabric.StaticCanvas()
  overlay.setDimensions({
    width: width + 20, height: height + 20,
  })

  // Transform coordinate system
  overlay.setViewportTransform([
    1, 0, 0, 1,
    width/2 + 10, height/2 + 10
  ])

  // Draw viewport margin ------------------------------------------------------
  const vp = new fabric.Path(
    `M ${ -width/2 - 10 } ${ -height/2 - 10 } ` +
    `L ${ -width/2 - 10 } ${ +height/2 + 10 } ` +
    `L ${ +width/2 + 10 } ${ +height/2 + 10 } ` +
    `L ${ +width/2 + 10 } ${ -height/2 - 10 } ` +
    `L ${ -width/2 - 10 } ${ -height/2 - 10 } z ` +
    // Lines are offset here to make them sharp
    `M ${ -viewPort[0]/2 - 0.5 } ${ -viewPort[1]/2 - 0.5 } ` +
    `L ${ +viewPort[0]/2 - 0.5 } ${ -viewPort[1]/2 - 0.5 } ` +
    `L ${ +viewPort[0]/2 - 0.5 } ${ +viewPort[1]/2 - 0.5 } ` +
    `L ${ -viewPort[0]/2 - 0.5 } ${ +viewPort[1]/2 - 0.5 } ` +
    `L ${ -viewPort[0]/2 - 0.5 } ${ -viewPort[1]/2 - 0.5 } z`
  )
  console.log('width/height', width, height)

  vp.setOptions({ fill: 'rgba(255, 255, 255, 0.6)' })
  overlay.add(vp)

'F': () => { point.x += Math.cos(a)*dist; point.y += Math.sin(a)*dist; pathStr += ` L ${point.x} ${point.y}`; },
    '+': () => { a -= angle; },
    '-': () => { a += angle; },
    '[': () => { stack.push({point: {x: point.x, y: point.y}, a: a}); },
    ']': () => { ({point: point, a: a} = stack.pop()); pathStr += ` M ${point.x} ${point.y}`; }
  }
  
  var commands = string.replace(/[^F+-\[\]]/g, '').split('');
  commands.forEach((cmd) => {
    var move = translations[cmd];
    if(move) {
      move();
    }
  });
  
  let path = new fabric.Path(pathStr);
  path.stroke = fgColor;
  path.strokeLineCap = 'round';
  path.strokeLineJoin = 'round';
  path.fill = 'none';
  canvas.backgroundColor = bgColor;
  canvas.add(path);
  let bounds = path.getBoundingRect();
  if(bounds.width === 1 || bounds.height === 1) return null;
  path.scaleToHeight(canvas.height*0.98);
  path.center();
  bounds = path.getBoundingRect();
  if(isNaN(bounds.width) || isNaN(bounds.height)) return null;
  canvas.renderAll();

  return canvas.nodeCanvas.toBuffer();
}

_createIcon(path) {
        return new fabric.Path(path);
    }
}

g.edges().map(e => g.edge(e)).forEach(edge => {
          let path = this.drawSVGEdgeWithArrow(edge);

          let pathObj = new fabric.Path(path);
          pathObj.set({
            metricId: edge.label,
            fill: 'transparent',
            stroke: 'black',
            strokeWidth: INTRA_STAGE_EDGE_STROKE_WIDTH,
            perPixelTargetFind: true,
            hasControls: false,
            hasRotatingPoint: false,
            lockMovementX: true,
            lockMovementY: true,
          });

          objectArray.push(pathObj);
          this.stageInnerObjects[stageId].push(pathObj);
        });