How to use the @antv/g/lib.Canvas function in @antv/g

afterTransform() {}
    }, options);
    let { graph,
      width,
      height,
      canvas,
      beforeTransform,
      afterTransform } = options;
    const graphCanvas = graph.getCanvas();
    const graphBBox = graph.getBBox();
    const padding = graph.getFitViewPadding();
    const children = graphCanvas.get('children');
    const matrixCache = BaseUtil.cloneDeep(graph.getMatrix());
    if (!canvas) {
      const containerDOM = DomUtil.createDOM('<canvas></canvas>');
      canvas = new G.Canvas({
        containerDOM,
        width,
        height
      });
    }
    const matrix = GraphicUtil.getAutoZoomMatrix({
      minX: 0,
      minY: 0,
      maxX: width,
      maxY: height
    }, graphBBox, padding);
    beforeTransform(matrix, matrixCache);
    graph.setMatrix(matrix);
    canvas.set('children', children);
    canvas.matrix = matrix;
    // canvas.draw();

const { Canvas } = require('@antv/g/lib');
const Shape = require('../../../src/shape/shape');
require('../../../src/shape/edge');
const expect = require('chai').expect;
const div = document.createElement('div');
div.id = 'edge-shape';
document.body.appendChild(div);

const canvas = new Canvas({
  containerId: 'edge-shape',
  width: 600,
  height: 600
});

describe('shape edge test', () => {
  describe('basic method test', () => {
    it('get factory', () => {
      const factory = Shape.getFactory('edge');
      expect(factory).not.eql(undefined);
    });
    it('get default', () => {
      const factory = Shape.getFactory('edge');
      const shape = factory.getShape();
      expect(shape.type).eql('line');
    });

const expect = require('chai').expect;
const G = require('@antv/g/lib');
const Global = require('../../../src/global');
const Node = require('../../../src/item/node');
const Edge = require('../../../src/item/edge');
const div = document.createElement('div');
div.id = 'edge-spec';
document.body.appendChild(div);

const canvas = new G.Canvas({
  containerId: 'edge-spec',
  width: 600,
  height: 600
});

describe('edge test, with circle', () => {
  const aNode = new Node({
    model: {
      id: 'a',
      x: 100,
      y: 100,
      size: 20,
      shape: 'circle'
    },
    group: canvas.addGroup()
  });

_initCanvas() {
    let container = this.get('container');
    if (Util.isString(container)) {
      container = document.getElementById(container);
      this.set('container', container);
    }
    if (!container) {
      throw Error('invalid container');
    }
    const canvas = new G.Canvas({
      containerDOM: container,
      width: this.get('width'),
      height: this.get('height'),
      renderer: this.get('renderer'),
      pixelRatio: this.get('pixelRatio')
    });
    this.set('canvas', canvas);
    this._initGroups();
  }
  _initGroups() {

_initCanvas() {
    let container = this.get('container');
    if (Util.isString(container)) {
      container = document.getElementById(container);
      this.set('container', container);
    }
    if (!container) {
      throw Error('invalid container');
    }
    const canvas = new G.Canvas({
      containerDOM: container,
      width: this.get('width'),
      height: this.get('height'),
      renderer: this.get('renderer'),
      pixelRatio: this.get('pixelRatio')
    });
    this.set('canvas', canvas);
    this._initGroups();
  }
  _initGroups() {

getCanvas() {
    let { width, height, canvas } = this.options;
    if (!canvas) {
      const containerDOM = Util.createDOM('<canvas></canvas>');
      canvas = new G.Canvas({
        containerDOM,
        width,
        height
      });
    }
    if (!canvas.drawCount) {
      canvas.drawCount = 0;
    }
    return canvas;
  }
  /**