const F2 = require('@antv/f2');
const { G } = F2;

<script src="https://unpkg.com/@antv/f2"></script>
<canvas id="container"></canvas>
<script>
    const { Canvas } = F2.G; // require Canvas
    const canvas = new Canvas({
      el: 'canvas',
      width: 200,
      height: 100
    }); // create a canvas instance
    const container = canvas.addGroup({
      zIndex: 2
    }); // add a group to canvas 
    const itemGroup = container.addGroup({
      zIndex: 1
    }); // add a group to container 
    itemGroup.addShape('circle', {
      attrs: {
        x: 5,
        y: 0,
        r: 5,
        fill: 'red'
      }
    }); // add a circle to group
    itemGroup.addShape('text', {
      attrs: {
        x: 17,
        y: 0,
        textAlign: 'start',
        textBaseline: 'middle',
        fontSize: 12,
        fill: 'red',
        text: '分类一'
      }
    }); // add text to group
    const bbox = itemGroup.getBBox(); // get the bounding box of the group in order to calculate the display position of other graphs
    container.addShape('rect', {
      zIndex: 0,
      attrs: {
        x: bbox.minX - 5,
        y: bbox.minY - 5,
        width: bbox.width + 10,
        height: bbox.height + 10,
        fill: 'rgba(0, 0, 0, 0.09)',
        radius: 4
      }
    }); // add a rectangle
    container.sort(); // sort by zIndex.
    container.moveTo(30, 50); // move the container to (30, 50)
    
    canvas.addShape('rect', {
      zIndex: 0,
      attrs: {
        x: 0,
        y: 0,
        width: 200,
        height: 100,
        fill: 'rgba(0, 0, 0, 0.09)',
        radius: 4
      }
    }); // add a rectangle
    
    canvas.sort();
    canvas.draw(); // draw
</script>