openpencil/packages/docs/user-guide/canvas-navigation.md
Danila Poyarkov d354c990ee docs: refresh SDK and workflow guides
Document current public contracts and implemented workflows, correct invalid editor and slot examples, and distinguish supported font, recovery, and library behavior from remaining gaps.
2026-09-15 22:52:41 +03:00

3.6 KiB
Raw Blame History

title description
Canvas Navigation Panning, zooming, ruler guides, snapping, and distance measurements 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.

  • Space + drag — hold Space and drag anywhere on the canvas
  • Middle mouse drag — press and drag the middle mouse button
  • Two-finger trackpad — swipe with two fingers on a trackpad
  • Shift + mouse wheel — pan horizontally

Hand Tool

Press H 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.

Zooming

Zoom in and out centered on your cursor position.

  • Ctrl + scroll (or ⌘ + scroll on Mac) — scroll up to zoom in, scroll down to zoom out
  • 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
Pan Space + drag Space + drag
Hand tool H H
Zoom in ⌘+ Ctrl + +
Zoom out ⌘− Ctrl + −
Zoom to 100% ⌘0 Ctrl + 0

Ruler Guides

Enable View → Rulers, then drag from the top ruler for a horizontal guide or the left ruler for a vertical guide. Drop onto the page for a canvas guide, or onto a frame for a guide in that frame's coordinates.

  • Click a guide to select it; drag it to reposition it or transfer it between the page and a frame.
  • Hold Option / Alt while dragging an existing guide to duplicate it.
  • Drag a guide back onto a ruler to remove it, or use its context menu's Remove guide action.
  • Guide changes support undo/redo and are preserved in .fig files.

Snapping

Under View → Preferences, toggle Snap to Geometry, Snap to Objects, and Snap to Pixel Grid independently. Preferences are saved between sessions.

Geometry and object snapping help align vector points, moved layers, and resized edges with nearby geometry, objects, guides, and frame bounds. Alignment lines appear for those targets; pixel-grid rounding does not draw an alignment line for every pixel.

Hold Control during a layer drag to temporarily bypass object and pixel snapping, including on macOS where this is Control, not Command.

Distance Measurements

Select a layer, hold Option on macOS or Alt on Windows/Linux, and hover another layer to see temporary distance measurements. Releasing the modifier clears the overlay; it does not add guides or change the document.

Command Palette

Press ⌘K on macOS or Ctrl + K on Windows/Linux to search editor and application actions. Select a result to run it; unavailable actions remain subject to the current selection and document state.

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 for how to work with objects on the canvas.