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

describe('Interval Element', () => {
  const div = document.createElement('div');
  div.id = 'interval';
  document.body.appendChild(div);

  const canvas = new Canvas({
    containerId: 'interval',
    renderer: 'canvas',
    width: 200,
    height: 200,
    pixelRatio: 2,
  });
  // const container = canvas.addGroup();
  const rectCoord = new Rect({
    start: {
      x: 0,
      y: 180,
    },
    end: {
      x: 180,
      y: 0,
    },

values: ScatterData.map((d) => d.GDP),
  });
  const lifeExpectancyScale = new LinearScale({
    field: 'LifeExpectancy',
    values: ScatterData.map((d) => d.LifeExpectancy),
  });
  const populationScale = new LinearScale({
    field: 'Population',
    values: ScatterData.map((d) => d.Population),
  });
  const shapeIdentityScale = new IdentityScale({
    field: 'circle',
    values: ['circle'],
  });

  const canvas = new Canvas({
    containerDOM: div,
    renderer: 'svg',
    width: 400,
    height: 400,
    pixelRatio: 2,
  });
  const container = canvas.addGroup();

  it('constructor', () => {
    pointElement = new Point({
      data: ScatterData,
      scales: {
        GDP: gdpScale,
        LifeExpectancy: lifeExpectancyScale,
        Population: populationScale,
        circle: shapeIdentityScale,

const expect = require('chai').expect;
const G = require('@antv/g');
const Item = require('../../../src/item/item');
const div = document.createElement('div');
div.id = 'item-spec';
document.body.appendChild(div);

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

describe('item test', () => {
  it('new item & destroy', () => {
    const group = new G.Group({});
    const item = new Item({
      model: { a: 1, b: 2 },
      group
    });
    item.set({
      a: 11,
      b: 22
    });

before(() => {
    div = document.createElement('div');
    div.id = 'c1';
    document.body.appendChild(div);

    canvas = new Canvas({
      containerId: 'c1',
      width: 500,
      height: 500,
      pixelRatio: 2,
    });
    group = canvas.addGroup();
  });

describe('polar labels', function() {
  const div = document.createElement('div');
  document.body.appendChild(div);

  const canvas = new Canvas({
    containerDOM: div,
    width: 500,
    height: 500,
  });

  const coord = new Polar({
    start: {
      x: 0,
      y: 100,
    },
    end: {
      x: 100,
      y: 0,
    },
  });

before(() => {
    div = document.createElement('div');
    div.id = 'c1';
    document.body.appendChild(div);

    canvas = new Canvas({
      containerId: 'c1',
      width: 500,
      height: 500,
      pixelRatio: 2,
    });
    group = canvas.addGroup();
  });

public _initCanvas() {
    const width = this.domWidth;
    const height = this.height;
    const canvas = new Canvas({
      width,
      height,
      containerDOM: this.domContainer,
      capture: false,
    });
    const node = canvas.get('el');
    node.style.position = 'absolute';
    node.style.top = 0;
    node.style.left = 0;
    node.style.zIndex = 3;
    this.canvas = canvas;
  }
  public _initBackground() {

const size = self.get('size');
    const className = self.get('className');
    let parentNode = self.get('container');
    const container = createDOM('<div style="width:' + size[0] + 'px; height:' + size[1] + 'px" class="' + className + '"></div>');
    if (isString(parentNode)) {
      parentNode = document.getElementById(parentNode);
    }
    if (parentNode) {
      parentNode.appendChild(container);
    } else {
      graph.get('container').appendChild(container);
    }
    self.set('container', container);
    const containerDOM = createDOM('<div class="g6-minimap-container"></div>');
    container.appendChild(containerDOM);
    const canvas = new G.Canvas({
      containerDOM,
      width: size[0],
      height: size[1],
      pixelRatio: graph.get('pixelRatio')
    });
    self.set('canvas', canvas);
    self.updateCanvas();
  }
  initViewport() {

private initGCanvas() {
    /** 创建canvas */
    const { renderer = 'canvas', pixelRatio } = this.plot;
    const { width, height } = this.getCanvasSize();
    this.canvas = new Canvas({
      containerDOM: this.containerDOM,
      width,
      height,
      renderer,
      pixelRatio,
    });
    this.width = width;
    this.height = height;
    this.updateCanvasTheme();
  }
}