Canvas & navigation

Pan, zoom, the grid, the draw order, rendering styles, and how to find your way around the plan.

The canvas is where everything is drawn. It renders your plan procedurally from data every frame, so it stays sharp at any zoom — and it always draws on a paper-white (or blueprint) sheet, even when the rest of the app is in dark mode.

The procedural canvas with grid and rendering styles
The canvas renders from data every frame, so it stays crisp at any zoom.

Moving around

ActioniPhone / iPadMac
PanDrag with one finger (when not editing)Click-drag the background, or two-finger scroll
ZoomPinchPinch on a trackpad, or the mouse scroll-wheel over the canvas
Reset viewDouble-tapDouble-click
  • Zoom range is clamped to 0.05×–50×. There is no panning limit — you can scroll the plan anywhere on screen.
  • Double-tap (or double-click) resets zoom to 1× and recentres, with a smooth animation. It’s your “I’m lost in zoom space” recovery.
  • Mouse scroll-wheel zoom (Mac) only responds to a notched wheel; a trackpad keeps pinch-to-zoom, so the two never fight.

Auto-focus on selection

Selecting any element animates the camera to centre it and frame roughly 6 metres of context around it — a context-aware zoom rather than a fixed magnification. On a side-panel layout (Mac and landscape iPad) the element is centred; on a bottom-sheet layout (iPhone) it’s biased upward so the editor sheet doesn’t cover what you selected.

The grid

The grid is drawn in real-world units and culled to what’s visible, so it stays fast even when you zoom far out.

  • Spacing follows your unit setting (default 1 m); see Settings. Minor lines mark each grid step; major lines are drawn every few steps, darker and heavier, for orientation.
  • Empty canvas: a brand-new drawing with no walls shows a sensible 6 m × 6 m blank area at a readable grid spacing, so you always have somewhere to start building.

Rendering styles

Two canvas styles ship in the box (set in Layers & styles):

  • Normal — black walls and clear symbols on a paper-white sheet (the default architectural look).
  • Blueprint — a deep cyanotype-navy background with white linework and a warm-orange selection highlight.

The plan always renders light regardless of system dark mode — a floor plan reads the same on paper either way, and inverting it would wash the symbols out. Only the floating UI (tool palette, sheets, pills) follows your light/dark appearance.

What’s drawn, and in what order

Each frame paints in layers, bottom to top — useful to know when elements overlap:

  1. Grid
  2. Active-room highlight (room tool)
  3. Walls
  4. Doors
  5. Windows
  6. Fixtures & furniture
  7. Lights
  8. Radiators / heat sources
  9. Measurement labels
  10. Invalid-room outlines (dashed amber)
  11. Room labels (name + area)
  12. Room-snap indicators
  13. Wall-drawing previews (rubber-band line, dashed box, knife guide)
  14. Wall Edit Mode handles
  15. Placement crosshair

Structural geometry (walls, doors, windows) is drawn first so that fittings, labels and interactive guides always sit on top.

World-space sizing

Wall thickness, door leaves, window frames and opening widths are all stored in real-world metres and scaled to the screen by the current zoom — never faked to a constant on-screen size. Zoom out far enough and a thin wall becomes sub-pixel; that’s expected, just zoom back in. Only text labels and construction lines (swing arcs, casement indicators) keep a fixed on-screen size so they stay legible.

Next