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

const expect = require('chai').expect;
const HtmlShape = require('../../../../src/extend/g/html');
const Util = require('../../../../src/util/');
const G = require('@antv/g');

// const Util = G6.Util;
// const HtmlShape = G6.Graph.HtmlShape;
// const Canvas = G6.Canvas;
const width = 500;
const height = 200;
const dom = document.createElement('div');
document.body.appendChild(dom);
const canvas = new G.canvas.Canvas({
  containerDOM: dom,
  width,
  height,
  pixelRatio: 1
});
const htmlElementContaniner = dom.appendChild(Util.createDOM('<div class="graph-container-html-Elements"></div>'));
htmlElementContaniner.style.width = width + 'px';
htmlElementContaniner.style.height = height + 'px';
htmlElementContaniner.style.position = 'absolute';
htmlElementContaniner.style.top = 0;
htmlElementContaniner.style.left = 0;
htmlElementContaniner.style['z-index'] = -1;
canvas.set('htmlElementContaniner', htmlElementContaniner);
describe('gExtend htmlShape test', function() {
  const html = canvas.addShape('html', {
    attrs: {

const Util = require('../../util/');
const G = require('@antv/g');
const Mixin = function() {};

Util.augment(Mixin, {
  beforeDraw() {
    const context = this.get('context');
    const el = this.get('el');
    this.emit('beforedraw');
    context && context.clearRect(0, 0, el.width, el.height);
  }
});

Util.mixin(G.canvas.Canvas, [ Mixin ]);
Util.mixin(G.svg.Canvas, [ Mixin ]);

module.exports = Mixin;

/**
 * @fileOverview html shape
 * @author huangtonger@aliyun.com
 */

const Util = require('../../util/');
const G = require('@antv/g');
const Html = function(cfg) {
  Html.superclass.constructor.call(this, cfg);
};

Util.extend(Html, G.canvas.Shape);

Html.ATTRS = {
  x: 0,
  y: 0,
  width: 0,
  height: 0
};

Util.augment(Html, {
  canFill: true,
  type: 'html',
  __isPointInFill(x, y) {
    const bbox = this.getBBox();
    const rx = bbox.minX;
    const ry = bbox.minY;
    const width = bbox.maxX - bbox.minX;

}, attrs));
  },
  remove(bool) {
    const html = this.attr('html');
    html.css({
      visibility: 'hidden'
    });
    Html.superclass.remove.call(this, bool);
  },
  destroy() {
    const html = this.attr('html');
    html && html.destroy();
    Html.superclass.destroy.call(this);
  }
});
G.canvas.Shape.Html = Html;

module.exports = Html;