I remember making something like this myself for a project involving video editor with a "premiere-pro" looking timeline in canvas. At the time I remember looking at other projects like this one but they would have jquery dependencies or a weird api. This one looks nice and would have saved time probably.
Very cool! This looks really helpful for integrating canvas elements within a page.
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.
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!
> Then, I do the somewhat tedious work of translating between elements' bounding rectangles and positions into this space.
Having done something similar, it can be quite frustrating. Add in high DPI devices (window.devicePixelRatio > 1) and it gets even more complicated. All in all it would be nice if there were standard methods for doing the translations
7 comments
[ 0.55 ms ] story [ 219 ms ] threadWould you be able to share any details?
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: https://micahscopes.github.io/tangled-web-components/example...
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?
Having done something similar, it can be quite frustrating. Add in high DPI devices (window.devicePixelRatio > 1) and it gets even more complicated. All in all it would be nice if there were standard methods for doing the translations