Image Tools / Docs
Image Editor

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

ActionBinding
Zoom in+ or wheel up
Zoom out- or wheel down
Fit to screen0
Pinch zoomTwo-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:

  1. Hand mode — press H to switch the active tool to hand. Drag the canvas freely. Esc returns to pointer mode.
  2. Space + drag — temporary hand-pan from any tool. Release Space to return.
  3. 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+Drag on 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%

  • 0 fits 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.