3 ms·

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

50 points by fango 9y ago

brosky117 9y ago
This looks really interesting! What’s the primary use case for this? I read the README and didn’t see any discussion about why this was made.
- eksrow 9y ago
  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.
  - pedalpete 9y ago
    I'm building an editor like this right now. I'm wondering where you see the benefit of using a canvas for the timeline rather than html elements? Would you be able to share any details?
macawfish 9y ago
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. You can see the technique in action here: https://micahscopes.github.io/tangled-web-components/examples/ 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/resizeobserver https://developers.google.com/web/updates/2016/10/resizeobse... The question is "where's PositionObserver" at? Anybody know?
- etimberg 9y ago
  > 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
jitl 9y ago
No support for touch events I’m afraid. Didn’t pan or zoom on iOS 11 Safari.
- degenerate 9y ago
  Doesn't pan/zoom on Android (Chrome) either. I assume it's not supported. Bummer!

50 points by fango 9y ago

This looks really interesting! What’s the primary use case for this? I read the README and didn’t see any discussion about why this was made.

eksrow 9y ago
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.
- pedalpete 9y ago
  I'm building an editor like this right now. I'm wondering where you see the benefit of using a canvas for the timeline rather than html elements? Would you be able to share any details?

macawfish 9y ago

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. You can see the technique in action here: https://micahscopes.github.io/tangled-web-components/examples/ 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/resizeobserver https://developers.google.com/web/updates/2016/10/resizeobse... The question is "where's PositionObserver" at? Anybody know?

etimberg 9y ago
> 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

jitl 9y ago

No support for touch events I’m afraid. Didn’t pan or zoom on iOS 11 Safari.

degenerate 9y ago
Doesn't pan/zoom on Android (Chrome) either. I assume it's not supported. Bummer!