11 Canvas View - grymmjack/DRAW GitHub Wiki

Ch. 11 πŸ–₯️ Canvas & View Controls

What you'll learn: How to navigate any canvas β€” zoom, pan, the floating Preview Window, pattern-tile preview, reference images, fill / clear shortcuts, and canvas resize / crop.


Zoom, Pan & Navigation

🎯 Goal: Navigate canvases of any size efficiently.

Zoom

Action Shortcut
Zoom in/out continuously Ctrl+Mouse wheel
Zoom in / out 1 step Ctrl+= / Ctrl+-
Reset to 100% Ctrl+0
Zoom to canonical level Hold Z and press 1-8 for 100%-800%, 9 for 1600%, and 0 for 3200%
Zoom tool Z (zoom)
Zoom to dragged region Z then drag
Zoom out (Zoom tool) Alt+Click

Zoom snaps to canonical levels: 25%, 50%, 75%, 100%, 200%, 300%, 400%, 600%, 800%, 1600%, 3200%

Pan

You can pan with any tool active, no need to switch:

  • Middle-mouse-drag.
  • Spacebar+drag.
  • Double-middle-click β€” instantly resets pan and zoom to fit the canvas.

Scrollbars appear automatically for canvases larger than the viewport. The canvas border (#) outlines the edge of the canvas at any zoom.

Preview Window, Tile Mode & View Options

🎯 Goal: Use preview and tiling for workflow efficiency.

Preview Window

F4 toggles the Preview Window, a floating, resizable, repositionable secondary view. It runs in one of three modes:

  1. Follow β€” a magnifier that tracks the cursor.
  2. Floating Image β€” a static reference display (e.g., the source you're tracing).
  3. Bin Quick Look β€” hover any drawer slot to see its content full-size in the preview.

Independent zoom and pan inside the preview, plus Alt+Click to color-pick without switching tools. The preview also remembers up to 10 recent images for quick swaps.

Preview Window

Pattern Tile Mode

View β†’ Pattern Tile Mode (or the tile-mode button in the Advanced Bar) toggles a 3Γ—3 tiled preview (up to 512Γ—512 source). Seams in seamless textures jump out instantly because they appear nine times.

Chapter 11 - Tile Mode

Other view options

  • Grayscale Preview β€” Ctrl+Alt+Shift+G. Inspect value structure without color distraction.
  • Reference Image β€” Ctrl+R. See Chapter 15.

Canvas fill & clear

  • Delete β€” clear (Edit β†’ Clear). Removes the active selection's pixels (or the whole layer if no selection). No prompt.
  • Backspace β€” fill with FG color. Instant, no prompt.
  • Shift+Backspace β€” fill with BG color. Instant.

Canvas crop & resize

  • Crop tool (crop) β€” interactive with handles; commit with Enter.
    • Drag handles inward to trim the canvas to the selected region.
    • Drag handles outward past a canvas edge to grow the canvas in that direction β€” new pixels are transparent on all layers. This is a quick alternative to the canvas resize dialog when you just need to add space on one side.
    • Arrow keys nudge the crop box 1px; Shift+Arrow nudges 10px.
  • Image β†’ Canvas Resize… β€” dialog with anchor selection and pixel/percent toggle.

➑️ Next: Chapter 12 β€” UI Customization & Settings

⚠️ **GitHub.com Fallback** ⚠️