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

`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)

  // Draw viewPort border ------------------------------------------------------
  overlay.add(new fabric.Rect({
    width: viewPort[0] + 1,
    height: viewPort[1] + 1,
    left: -viewPort[0]/2 - 1,
    top: -viewPort[1]/2 - 1,
    fill: 'transparent',
    stroke: 'rgba(0, 0, 0, 0.125)',
  }))

  return overlay
}

Array(4).fill().forEach((_, i) => {
    const [x, y] = [i % 2 * size, Math.floor(i / 2) * size]
    backgroundTile.add(new fabric.Rect({
      width: 1, height: 1,
      // FIXME: This is a hack, and it breaks down
      // when adding window scaling
      left: x - 1 + (offsetX / window.devicePixelRatio),
      top: y - 1 + (offsetY / window.devicePixelRatio),
      fill: 'rgba(0, 0, 0, 0.125)',
    }))
  })

_createInstance(type, options) {
        let instance;

        switch (type) {
            case 'rect':
                instance = new fabric.Rect(options);
                break;
            case 'circle':
                instance = new fabric.Ellipse(extend({
                    type: 'circle'
                }, options));
                break;
            case 'triangle':
                instance = new fabric.Triangle(options);
                break;
            default:
                instance = {};
        }

        return instance;
    }

handleMouseDown = (e) => {
    const {
      option,
      selectedFill,
      selectedStroke,
      size,
    } = this.state;
    if (option === 'rect') {
      this.started = true;
      this.newObject = new fabric.Rect({
        left: e.pointer.x,
        top: e.pointer.y,
        width: 0,
        height: 0,
        fill: selectedFill,
        stroke: selectedStroke,
        strokeWidth: size,
        selectable: false,
        hoverCursor: 'default',
      });
      this.b.add(this.newObject);
    } else if (option === 'ellipse') {
      this.started = true;
      this.newObject = new fabric.Ellipse({
        left: e.pointer.x,
        top: e.pointer.y,

addRect() {
        let coord = {left: 10, top: 10};
        this.canvas.add(new fabric.Rect({
            left: coord.left,
            top: coord.top,
            fill: this.primaryColor,
            width: 50,
            height: 50,
            opacity: this.transparency,
            stroke: this.secondaryColor,
            strokeWidth: this.canvas.freeDrawingBrush.width
        }));
    }

handleMouseDown = e => {

    if (this.state.option === "rect") {
      
      this.started = true;

      this.newObject = new fabric.Rect({
        left: e.pointer.x,
        top: e.pointer.y,
        width: 0,
        height: 0,
        fill: this.state.selectedFill,
        stroke: this.state.selectedStroke,
        strokeWidth: this.state.size,
        selectable:false,
        hoverCursor:'default'
      });

      this.b.add(this.newObject);
    }
    else if(this.state.option === 'ellipse') {

      this.started = true;

export default function newPad(pinNum = '1', left, top, width, height) {
  const rect = new fabric.Rect({
    width: width,
    height: height,
    fill: 'red'
  });

  const label = new fabric.Text('', {
    left: width / 2,
    top: height / 2,
    fontFamily: 'Arial',
    textAlign: 'center',
    originX: 'center',
    originY: 'center',
    fixedWidth: width
  });

  const group = new fabric.Group([rect, label], {

addRect() {
    const { fabricCanvas } = this
    const rect = new fabric.Rect({
      left: (highResCanvasWidth / 8),
      top: (highResCanvasHeight / 2) - highResBleedingEdge,
      fill: 'rgb(42, 153, 149)',
      stroke: 'rgb(42, 153, 149)',
      width: 200,
      height: 200,
      opacity: 1,
      originX: 'center',
      originY: 'center',
    });

    fabricCanvas.add(rect).setActiveObject(rect);

    this.addActionToChangeLog({
      object: this.fabricCanvas.getActiveObject(),
      type: 'addObject'

doMouseDown(o) {
    let canvas = this._canvas;
    this.isDown = true;
    let pointer = canvas.getPointer(o.e);
    this.startX = pointer.x;
    this.startY = pointer.y;
    this.rect = new fabric.Rect({
      left: this.startX,
      top: this.startY,
      originX: 'left',
      originY: 'top',
      width: pointer.x - this.startX,
      height: pointer.y - this.startY,
      stroke: this._color,
      strokeWidth: this._width,
      fill: this._fill,
      //fill: 'rgba(255,0,0,0.5)',
      transparentCorners: false,
      selectable: false,
      evented: false,
      angle: 0
    });
    canvas.add(this.rect);