
Canvas-area – A lightweight HTML Controller for one or more canvas children - fango
https://github.com/goessner/canvas-area
======
macawfish
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/example...](https://micahscopes.github.io/tangled-web-
components/examples/)

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...](https://developers.google.com/web/updates/2016/10/resizeobserver)

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

~~~
etimberg
> 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
No support for touch events I’m afraid. Didn’t pan or zoom on iOS 11 Safari.

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

------
brosky117
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
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
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?

