Very cool! This looks really helpful for integrating canvas elements within a page.<p>I was thinking of making a similar library for doing smart, reasonably efficient drawing/graphical annotation relative to the positions and dimensions of DOM elements in screen space. Right now, my method has been to create a single canvas with fixed positioning and stretch it across the screen.<p>Then, I do the somewhat tedious work of translating between elements' bounding rectangles and positions into this space.<p>You can see the technique in action here: <a href="https://micahscopes.github.io/tangled-web-components/examples/" rel="nofollow">https://micahscopes.github.io/tangled-web-components/example...</a><p>The dogs are custom elements and the edges are drawn on a fixed canvas.<p>A big part of why it's so tedious to go from DOM coordinates to fixed canvas coordinates is that there's not an efficient way to get notified when a DOM object's position changes relative to the screen (e.g., because you're scrolling or resizing the window) or the body.<p>Right now, with MutationObservers, you can get notified when an objects bounding box changes (ResizeObserver), AFAIK there's not an efficient way listen for updates to an objects' screen-space position, so you have to poll getBoundingClientRect... and it's not scalable!<p>Check out the top comment on this discussion:
<a href="https://developers.google.com/web/updates/2016/10/resizeobserver" rel="nofollow">https://developers.google.com/web/updates/2016/10/resizeobse...</a><p>The question is "where's PositionObserver" at? Anybody know?