Add User Guide section with 11 articles derived from OpenSpec specs
New docs/user-guide/ section covering: canvas navigation, selection &
manipulation, drawing shapes, text editing, pen tool, layers & pages,
context menu, exporting, auto-layout, components, and variables.
Each article includes Mac+Win/Linux shortcuts tables, cross-platform
note, cross-links between related articles, and consistent structure.
VitePress sidebar updated with User Guide as first group (12 entries).
2026-03-01 10:02:47 +00:00
---
title: Canvas Navigation
description: Panning, zooming, and the hand tool in OpenPencil.
---
# Canvas Navigation
The canvas is your infinite workspace. You can pan and zoom freely to navigate your design.
## Panning
Move the visible area of the canvas without affecting any objects.
Wrap remaining single-key shortcuts and key names in <kbd>
Single-letter tool keys (R, O, L, F, S, P, H), Escape, Enter,
Space (and locale equivalents), arrow key names in shortcut tables
and prose. Remove <kbd> from non-key words like 'drag'.
2026-03-08 10:07:08 +00:00
- < kbd > Space</ kbd > + drag — hold Space and drag anywhere on the canvas
Add User Guide section with 11 articles derived from OpenSpec specs
New docs/user-guide/ section covering: canvas navigation, selection &
manipulation, drawing shapes, text editing, pen tool, layers & pages,
context menu, exporting, auto-layout, components, and variables.
Each article includes Mac+Win/Linux shortcuts tables, cross-platform
note, cross-links between related articles, and consistent structure.
VitePress sidebar updated with User Guide as first group (12 entries).
2026-03-01 10:02:47 +00:00
- **Middle mouse drag** — press and drag the middle mouse button
- **Two-finger trackpad** — swipe with two fingers on a trackpad
## Hand Tool
Use <kbd> for keyboard shortcuts across all docs
Wrap all keyboard shortcut references in <kbd> tags in user guide,
reference, and development docs across all 7 locales (en, de, es,
fr, it, pl, ru). Tables, inline prose, and parenthetical hints.
2026-03-08 09:48:02 +00:00
Press < kbd > H</ kbd > to activate the hand tool for continuous panning. Any drag on the canvas pans the viewport without needing to hold Space. Switch to another tool (e.g., **V** for Select) to deactivate.
Add User Guide section with 11 articles derived from OpenSpec specs
New docs/user-guide/ section covering: canvas navigation, selection &
manipulation, drawing shapes, text editing, pen tool, layers & pages,
context menu, exporting, auto-layout, components, and variables.
Each article includes Mac+Win/Linux shortcuts tables, cross-platform
note, cross-links between related articles, and consistent structure.
VitePress sidebar updated with User Guide as first group (12 entries).
2026-03-01 10:02:47 +00:00
## Zooming
Zoom in and out centered on your cursor position.
Use <kbd> for keyboard shortcuts across all docs
Wrap all keyboard shortcut references in <kbd> tags in user guide,
reference, and development docs across all 7 locales (en, de, es,
fr, it, pl, ru). Tables, inline prose, and parenthetical hints.
2026-03-08 09:48:02 +00:00
- < kbd > Ctrl</ kbd > + scroll (or < kbd > ⌘</ kbd > + scroll on Mac) — scroll up to zoom in, scroll down to zoom out
Add User Guide section with 11 articles derived from OpenSpec specs
New docs/user-guide/ section covering: canvas navigation, selection &
manipulation, drawing shapes, text editing, pen tool, layers & pages,
context menu, exporting, auto-layout, components, and variables.
Each article includes Mac+Win/Linux shortcuts tables, cross-platform
note, cross-links between related articles, and consistent structure.
VitePress sidebar updated with User Guide as first group (12 entries).
2026-03-01 10:02:47 +00:00
- **Pinch gesture** — pinch on a trackpad to zoom in/out
- **Keyboard shortcuts** — see table below
Pinch-to-zoom on UI panels (layers, properties) is prevented so it doesn't accidentally change the browser zoom level.
## Keyboard Shortcuts
| Action | Mac | Windows / Linux |
|--------|-----|-----------------|
Wrap remaining single-key shortcuts and key names in <kbd>
Single-letter tool keys (R, O, L, F, S, P, H), Escape, Enter,
Space (and locale equivalents), arrow key names in shortcut tables
and prose. Remove <kbd> from non-key words like 'drag'.
2026-03-08 10:07:08 +00:00
| Pan | < kbd > Space< / kbd > + drag | < kbd > Space< / kbd > + drag |
| Hand tool | < kbd > H< / kbd > | < kbd > H< / kbd > |
Use <kbd> for keyboard shortcuts across all docs
Wrap all keyboard shortcut references in <kbd> tags in user guide,
reference, and development docs across all 7 locales (en, de, es,
fr, it, pl, ru). Tables, inline prose, and parenthetical hints.
2026-03-08 09:48:02 +00:00
| Zoom in | < kbd > ⌘< / kbd > < kbd > +< / kbd > | < kbd > Ctrl< / kbd > + < kbd > +< / kbd > |
| Zoom out | < kbd > ⌘< / kbd > < kbd > − < / kbd > | < kbd > Ctrl< / kbd > + < kbd > − < / kbd > |
| Zoom to 100% | < kbd > ⌘< / kbd > < kbd > 0< / kbd > | < kbd > Ctrl< / kbd > + < kbd > 0< / kbd > |
Add User Guide section with 11 articles derived from OpenSpec specs
New docs/user-guide/ section covering: canvas navigation, selection &
manipulation, drawing shapes, text editing, pen tool, layers & pages,
context menu, exporting, auto-layout, components, and variables.
Each article includes Mac+Win/Linux shortcuts tables, cross-platform
note, cross-links between related articles, and consistent structure.
VitePress sidebar updated with User Guide as first group (12 entries).
2026-03-01 10:02:47 +00:00
## Tips
- Zooming always targets the cursor position, so point at what you want to see closer.
- The hand tool is useful when you need to pan frequently — it stays active until you switch tools.
- See [Selection & Manipulation ](./selection-and-manipulation ) for how to work with objects on the canvas.
