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

startFabric(){
        this.canvas = new fabric.Canvas('fabriccanvas');

        $('#fabriccanvas').css('border', '1px solid #000000');
        this.canvas.setHeight(500);
        this.canvas.setWidth(600);

        // Adding event listeners to the color inputs.

        let primaryColorInput = document.getElementById('primaryColor');
        let secondaryColorInput = document.getElementById('secondaryColor');

        if (primaryColorInput) {
            primaryColorInput.addEventListener('input', () => {
                this.primaryColor = primaryColorInput.value;
                this.canvas.freeDrawingBrush.color = this.primaryColor;
            });

mouseTo = {},
            // 绘画默认类型
            drawType = false,
            // 绘画默认状态（start, end 绘画结束后不继续绘制，当用户鼠标按下去的时候改变状态）
            drawStatus = 'start',
            //画笔默认宽度
            drawWidth = 2,
            //画笔默认颜色
            color = '#000',
            //当前绘制对象
            drawingObject = false,
            backgroundColor = 'white',
            zoom = 1

        //初始化画板
        canvas = new fabric.Canvas(canvasId, {
            // 打开自由绘画
            isDrawingMode: true,
            skipTargetFind: true,
            selectable: false,
            selection: false,
            backgroundColor
        })

        //坐标转换
        const transformMouse = (mouseX, mouseY) => ({ x: mouseX / zoom, y: mouseY / zoom })

        ColorSelectDom.onchange = function () {
            let colorVal = this.value
            canvas.freeDrawingBrush.color = colorVal
            showSelectColorDom.style.borderColor = colorVal
            color = colorVal

componentDidMount = () => {
    let {
      tool,
      value,
      undoSteps,
      defaultValue,
      backgroundColor
    } = this.props;

    let canvas = this._fc = new fabric.Canvas(this._canvas/*, {
         preserveObjectStacking: false,
         renderOnAddRemove: false,
         skipTargetFind: true
         }*/);

    this._initTools(canvas);

    // set initial backgroundColor
    this._backgroundColor(backgroundColor)

    let selectedTool = this._tools[tool];
    selectedTool.configureCanvas(this.props);
    this._selectedTool = selectedTool;

    // Control resize
    window.addEventListener('resize', this._resize, false);

function Initialize_canvas() {
  var canvasElem: HTMLCanvasElement = document.createElement("canvas");
  canvasElem.id = 'c';
  canvasElem.height = 220;
  canvasElem.width = time_step * maximum_sixteenth_notes;
  document.body.appendChild(canvasElem);
  canvas = new fabric.Canvas('c', { selection: false });


  // Enable handling right-click event to remove lines
  $('.upper-canvas').bind('contextmenu', function (e) {
      var objectFound = false;
      var clickPoint = new fabric.Point(e.offsetX, e.offsetY);

      e.preventDefault();
      canvas.forEachObject(function (obj) {
          if (!objectFound && obj.containsPoint(clickPoint)) {
              objectFound = true;
              canvas.remove(obj); }
            });
      });

export async function svg2png(options: SVG2PNGOptions): Promise {
  options.debug && console.log(`Options: ${JSON.stringify({ ...options, input: null })}`)

  var canvas = new fabric.Canvas('c')
  const data = typeof options.input === 'string' ? options.input : options.input.toString()
  const img = await fabricImageFromData(data, 'svg')
  canvas.add(img)
  const s = canvas.toDataURL({ height: img.height, width: img.width, ...options, format: options.format || 'png' })

  if (options.encoding === 'dataURL') {
    return s as unknown as T
  }
  else if (options.encoding === 'base64') {
    return urlToBase64(s) as unknown as T
  }
  else if (options.encoding === 'buffer') {
    return Buffer.from(urlToBase64(s), 'base64') as unknown as T
  }
  else {
    return urlToData(s) as unknown as T

_setCanvasElement(element) {
        let selectedElement;
        let canvasElement;

        if (element.nodeType) {
            selectedElement = element;
        } else {
            selectedElement = document.querySelector(element);
        }

        if (selectedElement.nodeName.toUpperCase() !== 'CANVAS') {
            canvasElement = document.createElement('canvas');
            selectedElement.appendChild(canvasElement);
        }

        this._canvas = new fabric.Canvas(canvasElement, {
            containerClass: 'tui-image-editor-canvas-container',
            enableRetinaScaling: false
        });
    }

initializeCanvas: function () {
      let self = this;
      if (canvas == null) { 
        canvas = new fabric.Canvas('c');
      } else {
        canvas.dispose();
        canvas = new fabric.Canvas('c');
      }
      var img = new Image();
      img.onload = function() {
        self.configureCanvas(this.width, this.height);
        self.width = this.width;
        self.height = this.height;
      }
      img.src = this.image.src;
    },

if (outputFile.endsWith('.svg')) {
    const {data} = optimize(svg, {
      plugins: extendDefaultPlugins([
        'removeDimensions',
        {
          name: 'addAttributesToSVGElement',
          params: {attributes: [{width: size}, {height: size}]}
        },
      ]),
    });
    await writeFile(outputFile, data);
    return;
  }

  const {objects, options} = await loadSvg(svg);
  const canvas = new fabric.Canvas();
  canvas.setDimensions({width: size, height: size});
  const ctx = canvas.getContext('2d');
  ctx.scale(options.width ? (size / options.width) : 1, options.height ? (size / options.height) : 1);

  if (bg) {
    canvas.add(new fabric.Rect({
      left: 0,
      top: 0,
      height: size * (1 / (size / options.height)),
      width: size * (1 / (size / options.width)),
      fill: 'white',
    }));
  }

  canvas.add(fabric.util.groupSVGElements(objects, options));
  canvas.renderAll();

componentDidMount() {
    this.b = new fabric.Canvas('c', {
      isDrawingMode: true,
      width: 1366,
      height: 900,
      backgroundColor: 'black',
    });

    this.b.on('mouse:up', this.handleMouseUp);
    this.b.on('mouse:down', this.handleMouseDown);
    this.b.on('mouse:move', this.handleMouseMove);

    this.pencil = new fabric.PencilBrush(this.b);
    this.pencil.color = 'white';
    this.pencil.width = 5;

    this.b.freeDrawingBrush = this.pencil;
  }

componentDidMount() {
    scroll.scrollTo(0, {
      duration: 0,
      delay: 0,
      smooth: true,
    });

    const outsideView = new fabric.Canvas('outsideView', {
      width: highResCanvasWidth,
      height: highResCanvasHeight,
      enableRetinaScaling: false,
    });

    const insideView = new fabric.Canvas('insideView', {
      width: highResCanvasWidth,
      height: highResCanvasHeight,
      enableRetinaScaling: false,
    });

    fabric.Object.prototype.set({
      transparentCorners: false,
      borderColor,
      cornerColor,
      cornerSize: CORNER_SIZE,
      rotatingPointOffset: baseRotatingPointOffset,
      cornerStyle: 'circle',
    });

    fabric.Object.prototype.setControlsVisibility({
      mt: true,