Keeping 60fps on a canvas with 10,000 elements
A technical walkthrough of our viewport culling, dirty-region rendering, and offscreen canvas techniques that keep SketchPad fast no matter the canvas size.
Measure first
Canvas apps feel slow long before they technically fail. We profiled frame drops during drag, pan, zoom, and multi-select operations to find where interactivity degraded in real user flows.
Render less
The simplest performance rule held true everywhere: if it is outside the viewport, it should not cost a paint. Viewport culling and coarse spatial indexing dramatically reduced wasted work.
Update surgically
Dirty-region rendering helped us avoid repainting the entire canvas after every interaction. We tracked the minimum affected area and only refreshed what had actually changed.
Protect input latency
User perception depends as much on input responsiveness as raw frame rate. We batched expensive work off the direct interaction path so dragging stayed stable even on large documents.