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

left: 0,
        top: 0,
        fill: 'black',
        id: this.props.idSource(),
      }

      switch(type) {
        case 'line':
          return new fabric.Line([-50, 0, 50, 0], {
            stroke: 'black',
            id: defaults.id, // Re-use id generated above
            originX: 'center',
            originY: 'center',
          })
        case 'circle':
          return new fabric.Circle({
            radius: 27.5,
            ...defaults,
            ...options,
          }).setControlVisible('mtr', false)
        case 'ellipse':
          return new fabric.Ellipse({
            rx: 30,
            ry: 25,
            ...defaults,
            ...options,
          })
        case 'triangle':
          return new fabric.Triangle({
            width: 2 * 50 * Math.sqrt(1/3),
            height: 50,
            ...defaults,

g.nodes().map(node => g.node(node)).forEach(vertex => {
          let vertexCircle = new fabric.Circle({
            metricId: vertex.id,
            radius: VERTEX_DOT_RADIUS,
            left: vertex.x,
            top: vertex.y,
            originX: 'center',
            originY: 'center',
            fill: 'black',
            hasControls: false,
            hasRotatingPoint: false,
            lockMovementX: true,
            lockMovementY: true,
          });

          // let top = vertex.label.length > 10 ?
          //   vertex.y + (vertex.height * 5 / 12) : vertex.y + (vertex.height * 7 / 24);
          let top = vertex.y + (vertex.height * 7 / 24);

savePolygonClick: function(e) {
      console.log('saving polygon click');
      let pointer = canvas.getPointer(e.e);
      let circle = new fabric.Circle({
          id: this.getRandId(),
          strokeWidth: 1,
          radius: this.polyClickRadius,
          fill: '#fff',
          stroke: '#666',
          opacity: 0.8,
          left: this.getXCoordFromClick(pointer, this.polyClickRadius),
          top: this.getYCoordFromClick(pointer, this.polyClickRadius),
          hasControls: false,
          hasBorders: true,
          selectable: true,
          borderColor: 'white',
          padding: 3,
          labelType: POLY_CLICK_LABEL,
          hoverCursor: 'pointer'
        });

doMouseDown(o) {
    let canvas = this._canvas;
    this.isDown = true;
    let pointer = canvas.getPointer(o.e);
    [this.startX, this.startY] = [pointer.x, pointer.y];
    this.circle = new fabric.Circle({
      left: this.startX, top: this.startY,
      originX: 'left', originY: 'center',
      strokeWidth: this._width,
      stroke: this._color,
      fill: this._fill,
      selectable: false,
      evented: false,
      radius: 1
    });
    canvas.add(this.circle);
  }

addCircle() {
        let coord = {left: 10, top: 10};

        this.canvas.add(new fabric.Circle({
            left: coord.left,
            top: coord.top,
            fill: this.primaryColor,
            radius: 50,
            opacity: this.transparency,
            stroke: this.secondaryColor,
            strokeWidth: this.canvas.freeDrawingBrush.width
        }));
    }

saveExtremeClick: function(e) {
      let pointer = canvas.getPointer(e.e);
      let circle = new fabric.Circle({
        id: this.getRandId(),
        radius: this.extremeClickRadius, 
        fill: 'blue', 
        left: this.getXCoordFromClick(pointer, this.extremeClickRadius),
        top: this.getYCoordFromClick(pointer, this.extremeClickRadius),
        visible: true,
        score: 1.0,
        labelType: EC_LABEL,
      });
      canvas.add(circle);
      this.extremeClicks.push(circle.id);
      canvas.renderAll();
      if (this.extremeClicks.length === 4) {
        this.createBoxFromExtremeClicks();
      }
    },