Canvas & Navigation
Zoom, pan, and navigate the canvas — keyboard shortcuts and mouse controls.
The canvas is the central workspace where all drawing happens. This page covers navigation controls: zooming, panning, and coordinate systems.
Canvas Size
By default, new projects use a 1280×720 canvas. The canvas is centred in the viewport with a white background and a subtle 50px grid for alignment.
Zooming
| Method | Action |
|---|---|
| Scroll wheel | Zoom in/out centred on the cursor |
| Toolbar +/− | Zoom in/out by 15% increments |
| Zoom percentage | Click the percentage display to reset to 100% |
| Keyboard | No default shortcut — use the toolbar or scroll wheel |
Zoom range: 10% to 1000%. The canvas auto-fits to the viewport on initial load.
Panning
| Method | Action |
|---|---|
| Space + drag | Hold Space, then click and drag to pan |
| Middle mouse drag | Click and drag with the middle mouse button |
The cursor changes to a grab hand when panning, and grabbing when actively dragging.
Coordinate System
The canvas uses a standard screen coordinate system:
- Origin (0, 0) is at the top-left corner of the project canvas
- X increases to the right
- Y increases downward
- All stroke coordinates are stored in project-space pixels
When you draw, Chuzy automatically converts your screen coordinates to project coordinates, accounting for the current zoom and pan offset.
Canvas Rendering
Chuzy renders using the HTML5 Canvas 2D API with device pixel ratio (DPR) support for crisp output on Retina displays.
The rendering pipeline, from back to front:
- Canvas background (cream/off-white)
- Project canvas (white rectangle)
- Subtle grid lines
- Onion skin (previous/next keyframe ghosts)
- All visible layers, bottom to top, with opacity
- Current in-progress stroke (live preview)
- Canvas border shadow
Cursor Indicators
| Tool | Cursor |
|---|---|
| Pen | Crosshair + |
| Eraser | Cell indicator |
| Line, Rectangle, Circle | Crosshair + |
| Pan mode | Grab / Grabbing hand |