Canvas-area – A lightweight HTML Controller for one or more canvas children

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.

Then, I do the somewhat tedious work of translating between elements' bounding rectangles and positions into this space.

You can see the technique in action here: [url-redacted]

The dogs are custom elements and the edges are drawn on a fixed canvas.

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.

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!

Check out the top comment on this discussion: https://developers.google.com/web/updates/2016/10/resizeobse...

The question is "where's PositionObserver" at? Anybody know?