Canvas & zoom
Navigating the canvas — zoom, pan, fit, hand mode, and how multi-select interacts with empty canvas clicks.
The canvas is the document viewport. It's not infinite — it has a fixed document size — but you can zoom freely from a tiny thumbnail up to pixel-level inspection.
#Zoom
| Action | Binding |
|---|---|
| Zoom in | + or wheel up |
| Zoom out | - or wheel down |
| Fit to screen | 0 |
| Pinch zoom | Two-finger pinch (trackpad / touch) |
Zooming is anchored to the cursor. The point under your pointer stays fixed as you wheel — same behavior as Figma.
#Pan
There are three ways to pan, in order of convenience:
- Hand mode — press
Hto switch the active tool to hand. Drag the canvas freely.Escreturns to pointer mode. - Space + drag — temporary hand-pan from any tool. Release
Spaceto return. - Middle-mouse drag — pan without changing the active tool. Best when you're already deep in a creation tool.
Right-clicking on empty canvas toggles between pointer and hand. Right-clicking a layer opens its context menu instead.
#Pointer vs. creation tools
Two different click semantics depending on the active tool:
- Pointer tool (
V) — clicks select layers and open that layer's tool. So clicking a text layer auto-switches to the text tool. - Creation tool (shape, text, icon, asset, brush) — clicks create a new layer. Clicking an existing layer of the same kind selects it; clicking a different kind selects-and-switches.
Holding Alt while dragging in a creation tool bypasses auto-select and always creates — useful when you want to draw a new shape on top of an existing one without selecting it first.
#Multi-select
Click— select one layer.Ctrl+Click— additive: add or remove a layer from the current selection.Ctrl+Dragon empty canvas — rubber-band marquee. Every layer fully inside the marquee joins the selection.
When multiple layers are selected, the right-side panel shows controls common to all of them. Transforms (move / nudge / rotate / scale) apply to the whole group in one history step.
#Fit, zoom-to-selection, and 100%
0fits the document to the viewport.1(planned) will zoom to actual pixels (100%).- (planned) fit-to-selection — zoom to the bounding box of the current selection.
#Performance
Heavy pixel ops (filters, effects, big asset transforms) run in a dedicated editor.worker.ts and post ImageBitmap results back to the main thread. The canvas itself batches writes via requestAnimationFrame so dragging at 144Hz stays smooth.
If you're working on a 4K+ document and zoom feels sluggish, check that you don't have too many high-resolution asset layers stacked with effects — flattening unused groups (planned UI) or reducing canvas size will recover frames.