hunkim98
commented
1 year ago After much thought, I found that using css transform property to emulate the panning effect would require the canvas element to be big in size. We cannot have a canvas element too big just for the panning effect when the real grid canvas is small.
I came up with an idea to use images instead. Why don't we save the current state of the grid canvas as an image when the user finishes his/her interaction, and then use that image when user is panning and zooming?
While creating a grid canvas with more than 500 rows and 500 columns, I found there was a lag when the user pans the artwork. This happens because every time the user pans the canvas, all the canvas layers are rendered all together. I believe there is no need for unnecessary renders when a user pans through the canvas.
I came up with an idea to instead use css to remedy this issue. We could make the panning happen in the parent div element while the canvas element is not rendered. We could simply mask the area that is out of the window.
This approach requires a whole new change to our current code structure since the panning will happen outside of the canvas and the zoom happens in the canvas.
However, it will better the performance of our editor to accommodate examples that require more than 1 million grid squares.