The bounding box information obtained by the canvas element and the html element is inconsistent

[wang1212]

Create a canvas element and an html element and make them completely overlap:

const circle = new Circle({
  style: {
    cx: 200,
    cy: 200,
    r: 50,
    fill: 'red',
  },
});

const html = new HTML({
  style: {
    x: 150,
    y: 150,
    width: 100,
    height: 100,
    innerHTML:
      '<h1 style="width: 100px; height: 100px;">This is Title</h1>',
  },
});

Measure the bounding box information in three situations:

• initial state
• camera translation
• camera zoom

and compare them.

As shown in the figure above, the bounding box information of the html element will change, while that of the canvas element (circle) will not change.

---

The inconsistency between the canvas element and the html element behavior results in some incorrect visual effects when the two are used together, such as antvis/G6#5781

---

• getBBox()
  • https://developer.mozilla.org/en-US/docs/Web/API/SVGGraphicsElement/getBBox
  • https://www.w3.org/TR/SVGTiny12/svgudom.html#svg__SVGLocatable
  • https://stackoverflow.com/questions/6179173/how-is-the-getbbox-svgrect-calculated
• getBoundingClientRect()
  • https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
  • https://drafts.csswg.org/cssom-view/#dom-element-getclientrects