How to use the konva.Circle function in konva

points: [
                x,
                0,
                x,
                y * 0.8,
            ],
            pointerLength,
            pointerWidth: pointerLength,
            fill: 'white',
            stroke: 'white',
            strokeWidth: pointerLength * 1.25,
        });
        this.add(this.base);

        // A circle will appear on the body of the arrow to indicate the type of clue given
        this.circle = new Konva.Circle({
            x,
            y: y * 0.3,
            radius: pointerLength * 2.25,
            fill: 'black',
            stroke: 'white',
            strokeWidth: pointerLength * 0.25,
            visible: false,
            listening: false,
        });
        this.add(this.circle);

        // The circle will have text inside of it to indicate the number of the clue given
        this.text = new Konva.Text({
            x,
            y: y * 0.3,
            offset: {

tracks.map((t, i) => {
      if(!t) return

      var color    = this.colorDict[t.status]
      var distance = 120
      var cStartX  = (i===0)?lEndX+offsetX:lEndX
      var cStartY  = (i===0)?lEndY+offsetY:lEndY
      
      // circle
      var circle = new Konva.Circle({
        x: cStartX,
        y: cStartY,
        radius: 10,
        fill: color,
        stroke: 'black',
        strokeWidth: 2,
      });
      // put this circle hit area into array for later detect
      this.hitTestPots.push({
        rect: {tx:cStartX-10, ty:cStartY-10, bx:cStartX+10, by:cStartY+10}, 
        title: t.title
      })
      // save the last end point
      lEndX = parseInt((i+1)/6)%2?(cStartX - distance):(cStartX + distance)
      lEndY = cStartY
      // the 6th point line, reset end x/y

drawLegend(layer) {

    var startCle = new Konva.Circle({
      x: 680,
      y: 340,
      radius: 6,
      fill: '#47BA47',
      stroke: 'black',
      strokeWidth: 2
    });
    layer.add(startCle)

    var startTxt = new Konva.Text({
      x: 700,
      y: 334,
      text: 'Start',
      fontSize: 14,
      fontFamily: 'Calibri',
      fill: 'green'

stroke: 'black',
      strokeWidth: 2
    });
    layer.add(startCle)

    var startTxt = new Konva.Text({
      x: 700,
      y: 334,
      text: 'Start',
      fontSize: 14,
      fontFamily: 'Calibri',
      fill: 'green'
    });
    layer.add(startTxt)

    var unlockCle = new Konva.Circle({
      x: 680,
      y: 360,
      radius: 6,
      fill: '#EEC900',
      stroke: 'black',
      strokeWidth: 2
    });
    layer.add(unlockCle)

    var unlockTxt = new Konva.Text({
      x: 700,
      y: 354,
      text: 'Unlock',
      fontSize: 14,
      fontFamily: 'Calibri',
      fill: '#EEC900'

const y1 = self.header_height + self.column_metadata_height + self.column_metadata_row_height / 2 - 10;
    const y2 = y1;
    const x1 = 0;
    const x2 = self.distance;
    var path = new Konva.Line({
      points: [
        x1,
        y1,
        x2,
        y2,
      ],
      stroke: 'grey',
      listening: false,
    });

    const circle = new Konva.Circle({
      x: x2,
      y: y2,
      radius: 3,
      fill: 'grey',
      listening: false,
    });

    let number = 0;
    const marker_tail = 3;
    let marker_distance = x2;
    const marker_number_distance = self._hack_round(30 / self.distance_step * 10) / 10;
    var distance = Math.round(100 * self.distance / self.distance_step) / 100;
    let marker_distance_step = self._hack_round(self.distance_step * marker_number_distance);
    let marker_counter = 0;

    const distance_number = new Konva.Text({

stroke: 'black',
      strokeWidth: 2
    });
    layer.add(quizCle)
  
    var quizTxt = new Konva.Text({
      x: 700,
      y: 374,
      text: 'Quiz',
      fontSize: 14,
      fontFamily: 'Calibri',
      fill: '#EE7942'
    });
    layer.add(quizTxt)

    var completeCle = new Konva.Circle({
      x: 680,
      y: 400,
      radius: 6,
      fill: '#EE0000',
      stroke: 'black',
      strokeWidth: 2
    });
    layer.add(completeCle)
  
    var completeTxt = new Konva.Text({
      x: 700,
      y: 394,
      text: 'Complete',
      fontSize: 14,
      fontFamily: 'Calibri',
      fill: '#EE0000'

initCrop() {
    let crop = new Konva.Circle({
      x: this.halfWidth,
      y: this.halfHeight,
      radius: this.cropRadius,
      fillPatternImage: this.image,
      fillPatternOffset: {
        x: this.halfWidth / this.scale,
        y: this.halfHeight / this.scale
      },
      fillPatternScale: {
        x: this.scale,
        y: this.scale
      },
      opacity: 1,
      draggable: true,
      dashEnabled: true,
      dash: [10, 5]

function createHoverAnchor({ point, group, layer }) {
  const hoverAnchor = new Konva.Circle({
    name: "hoverAnchor",
    x: point[0],
    y: point[1],
    stroke: green.primary,
    fill: green[0],
    strokeWidth: 2,
    radius: 5,
  });

  group.add(hoverAnchor);
  layer.draw();
  return hoverAnchor;
}

initCropStroke(): Konva.Circle {
    return new Konva.Circle({
      x: this.halfWidth,
      y: this.halfHeight,
      radius: this.cropRadius,
      stroke: this.cropColor,
      strokeWidth: this.lineWidth,
      strokeScaleEnabled: true,
      dashEnabled: true,
      dash: [10, 5]
    });
  }

const createAnchor = ({ x, y, name }) => {
  const group = new Konva.Group({ x, y, name, draggable: true, dragOnTop: false })

  const { stroke, strokeWidth, fill } = ANCHOR_DEFAULTS
  const anchor = new Konva.Circle({ x: 0, y: 0, radius: 4, stroke, strokeWidth, fill })
  const draggableAnchor = new Konva.Circle({ x: 0, y: 0, radius: 20 })

  group.add(anchor)
  group.add(draggableAnchor)

  group.on('mouseover', function() {
    const layer = this.getLayer()
    document.body.style.cursor = 'pointer'
    anchor.setStrokeWidth(4)
    layer.draw()
  })
  group.on('mouseout', function() {
    const layer = this.getLayer()
    document.body.style.cursor = 'default'
    anchor.setStrokeWidth(2)
    if (layer) {