I am developing a web component that renders some graphics on a <canvas>, that appended to the component's shadowRoot
I would like to re-size and re-render the canvas when the size of the element changes (e.g. its CSS width property is updated).
How to do so? Should I be using a ResizeObserver?
I ended up using a ResizeObserver in the constructor of my custom element:
constructor() {
super();
const resizeObserver = new ResizeObserver(() => {
// re-render my canvas
});
resizeObserver.observe(this);
}