• We have a PaperJS canvas that is set to 100% width/height
• Users can zoom and pan
• Users can add content to the canvas at various places within the canvas regardless of zoom/pan state
• We want to add scrollbars to the canvas like those used in Figma when there is content outside the currently viewable area

When a user zooms in/out or pans with a PaperJS canvas, they're not moving the actual canvas in the DOM or increasing the canvas element's size. Instead, they're changing the viewing relationship to content within the canvas element.

Thus the scrollbars need to be created in the canvas element but there doesn't appear to be a way to lock the scrollbars ratio. For example, if the scrollbars are in the canvas context and you zoom in, you're zooming on all of the canvas content and the scrollbars change in size as well. It seems like the only solution would be to have some sort of listener in place that always sets their size, position, etc in relation to the zoom/pan state of the canvas, which seems like a lot of extra code. Has anyone come across a solution for this?