How to use the konva.Path function in konva

node.showToolTip = jobText.indexOf('…') > -1;

    // create shape
    const box = new Konva.Rect({
        x: 0,
        y: 0,
        width: this.pgraph.boxWidth,
        height: this.pgraph.boxHeight,
        fill: 'white',
        stroke: hovered ? this.highlightColor : this.borderColor,
        strokeWidth: 1,
        cornerRadius: 5
    });

    // DOTS BTN GROUP
    const dotsVertIcon = new Konva.Path({
      x: 0,
      y: 8,
      scaleX: 0.8,
      scaleY: 0.8,
      // tslint:disable-next-line
      data: 'M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z',
      fill: this.textColor
    });

    const dotsBtnGroup = new Konva.Group({
      x: this.pgraph.boxWidth - 30,
      y: 4,
    });
    const dotsArea = new Konva.Rect({
      x: 0,
      y: 0,

drawJobBox(node, hovered = false) {
    const group = new Konva.Group({
      x: node.x_offset,
      y: node.y_offset,
      id: `jobBox${node.job.id}`
    });

    const statusIcon = new Konva.Path({
      x: 10,
      y: 10,
      scaleX: 0.9,
      scaleY: 0.9,
      data: this.svgStatuses[node.job.status].data,
      fill: this.svgStatuses[node.job.status].fill
    });
    // END STATUS ICON

    const jobText = this.fittingString(this.layerJobBoxes.getContext(), node.job.name, this.pgraph.boxWidth - 120);

    const jobNameText = new Konva.Text({
      x: 29,
      y: 4,
      text: jobText,
      fontSize: 15,

menuItems.forEach((menuItem, i) => {
      const itemGroup = new Konva.Group({
        x: 0,
        y: i * this.pgraph.ctxMenuItemHeight
      });
      const item = new Konva.Text({
        x: 23,
        y: 1,
        text: menuItem.text,
        fontFamily: 'Roboto',
        fill: this.context.pipeline.blocked_managing() ? this.blockedTextColor : this.textColor,
        fontSize: 15,
        padding: 10
      });
      const icon = new Konva.Path({
        x: 7,
        y: 8,
        scaleX: 0.8,
        scaleY: 0.8,
        data: menuItem.data,
        fill: this.context.pipeline.blocked_managing() ? this.blockedTextColor : this.textColor,
      });
      const bg = new Konva.Rect({
        x: 0,
        y: 0,
        width: 120,
        height: this.pgraph.ctxMenuItemHeight,
        fill: 'white',
        stroke: this.borderColor,
        strokeWidth: 1
      });

fontFamily: self.options.font.family,
        listening: false,
      }),

      cluster_overlay: new Konva.Rect({
        fill: 'white',
        opacity: 0.5,
      }),

      cluster_border: new Konva.Line({
        stroke: '#3a3a3a',
        strokeWidth: 1,
        dash: [6, 2],
      }),

      icon: new Konva.Path({
        fill: 'grey',
      }),

      rect_gradient: new Konva.Rect({
        x: 0,
        y: 80,
        width: 100,
        height: 20,
        fillLinearGradientStartPoint: {
          x: 0,
          y: 80,
        },
        fillLinearGradientEndPoint: {
          x: 100,
          y: 80,
        },

initResizeIcon(): Konva.Path {
    return new Konva.Path({
      x: this.halfWidth + this.cropRadius * 0.86 - 8,
      y: this.halfHeight + this.cropRadius * -0.5 - 10,
      data: 'M47.624,0.124l12.021,9.73L44.5,24.5l10,10l14.661-15.161l9.963,12.285v-31.5H47.624z M24.5,44.5   L9.847,59.653L0,47.5V79h31.5l-12.153-9.847L34.5,54.5L24.5,44.5z',
      fill: this.cropColor,
      scale: {
        x: 0.2,
        y: 0.2
      }
    });
  }