Hello,
In my application, I'm implementing a selection feature for image parts, similar to image editors. Now, I'm facing challenges when handling very large zoom levels (e.g., 6000% or higher). While this isn't an issue when using an image tag, I'm encountering limitations with the canvas when it exceeds a size of around 15,000 x 15,000 pixels, especially when using Paper.js.
Here are my thoughts so far:
Rendering in SVG instead of Canvas using SVG export: One option is to use SVG for rendering, while using a smaller Paper.js canvas offscreen. However, this approach sacrifices some of the interactive features, which makes it unsuitable for my needs.
Dynamic Recalculation of Path Positions: Another idea is to use a single canvas, limited to the browser window size, and recalculate all Paper.js path positions as I scroll or zoom. As I scroll, the Paper.js canvas would move out of view, and once the scrolling stops, it would reposition itself back to (0,0) and recalculate the paths. The same approach could be applied to zooming. This would require an abstraction layer over Paper.js.
My questions:
Thank you for your help!