The infinite canvas, explained with a camera you can drag
An online whiteboard doesn’t have a huge page hidden off-screen. It has a small camera floating over an endless coordinate plane, and two lines of maths.
World coordinates and screen coordinates
Everything you draw is stored in world coordinates: numbers that never change when you pan or zoom. A stroke at (200, 110) stays at (200, 110) forever. What changes is the camera, described by three numbers: where its top-left corner sits in the world (x, y) and how much it magnifies (zoom).
To draw, every world point is converted to a screen pixel:
screen = (world − camera) × zoom
And to work out what you just touched, the app runs it backwards:
world = screen ÷ zoom + camera
Drag the dashed rectangle in the demo and only the camera numbers change; the star’s world position doesn’t move, but its screen position does. Push the camera away and the star goes off screen. That’s all panning is. The world was never moved.
Zoomed all the way out, a big board starts to look like a diagram in its own right; for one that moves, ahaboo’s narrated Moon-phases explainer walks through the Sun, Earth and Moon geometry as it talks.
Why zooming to the cursor needs an extra step
If an app only multiplies the zoom, everything scales away from the top-left corner of the screen, which is the naive setting in the demo. Content you were looking at slides off to the side. To zoom around a point, the camera has to move at the same time so that point keeps its screen position. Rearranging the formula gives the new camera position:
camera′ = point − screenPos ÷ zoom′
Switch the demo to Zoom around the star and move the slider: the star stays put on the screen while everything else grows or shrinks around it. The SketchWith whiteboard does exactly this for Ctrl + scroll, using the mouse position, and for pinch gestures, using the midpoint between your two fingers.
Keeping an endless board fast
- Cull what you can’t see. Each item has a bounding box. Before drawing, the app checks it against the camera’s view, (camera.x, camera.y, width ÷ zoom, height ÷ zoom), and skips anything outside.
- Fewer points per stroke. Strokes are thinned with Ramer–Douglas–Peucker when you lift the pen. The drawing page has a demo of it.
- Redraw only when needed. The canvas repaints on the next animation frame after something changes, not continuously.
- Grids that adapt. Background grid spacing multiplies by four whenever squares would shrink below about 14 pixels, so zooming out doesn’t turn the paper into grey mush.
Questions people ask
What is an infinite canvas?
A drawing surface with no fixed edges. Instead of a page, you look at a movable, zoomable window onto an unbounded coordinate plane, so you can keep adding content in any direction and zoom out to see all of it.
Is the canvas really infinite?
Practically, yes. Positions are stored as JavaScript double-precision numbers, which stay precise to a fraction of a pixel for millions of pixels in every direction. You would have to pan for a very long time to notice any loss of precision.
Why do some apps zoom toward the corner instead of my cursor?
Because they only change the zoom factor and leave the camera position alone. Zooming around the cursor also needs the camera to shift so that the world point under the cursor stays under the cursor: camera′ = point − screenPos ÷ zoom′. The toggle in the demo shows both behaviours.
Does an infinite canvas slow down with lots of drawings?
It can. SketchWith checks each item’s bounding box against the visible area and skips anything off-screen, simplifies strokes when you lift the pen, and only redraws when something changes.