Handle very large canvas size

21 views
Skip to first unread message

N M

unread,
Sep 11, 2024, 7:41:02 AMSep 11
to Paper.js

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:

  1. 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.

  2. 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:

  • Do you have any other ideas for handling these large zoom scenarios?
  • Does an abstraction layer like this already exist for Paper.js?

Thank you for your help!

Reply all
Reply to author
Forward
0 new messages