The EditorCanvas Layout Board

Canvas Layout Board

Arrange a chapter's panels on the infinite canvas — spatial placement, camera moves with path ghosting, enter framing, gap calipers, reveal modes, and decorations.

The Canvas Layout Board is where you author the infinite canvas: a full-screen spatial tool that places a chapter's panels on one continuous plane, shows the story graph as arrows between them, and edits the camera choreography the reader will experience. Open it from the workspace navigation (Canvas Layout).

Think in world units: 1 unit = 1 player pixel at zoom 1. Panels placed at their natural size (e.g. 1024 × 576) render pixel-perfect; the empty space between panels reads as time — wider gaps slow the story down.

The board

  • Panels render with their real artwork, positioned at their world coordinates. Drag to move, drag the corner handle to resize (16-unit snap), shift-click for multi-select.
  • Rotate: a selected panel shows a round knob above its top edge (it travels with the rotation). Drag it to rotate the panel around its origin; hold Shift to snap to 15° steps. The inspector's Rotation (°) field (−180 to 180) sets an exact angle and Reset rotation clears it. Rotation is saved with the placement and rendered by the player; a rotated panel can't be resized until you reset it.
  • Graph edges overlay as arrows: dashed for conditional edges, highlighted when an edge carries a custom camera move. The trail and the space are visible together — that's the point of the board.
  • Viewport: drag empty space to pan, wheel to zoom, Fit to frame everything.
  • Minimap (bottom right): an overview of every placement with the visible area outlined in yellow. Click or drag in it to move the view.
  • Undo/redo covers every board operation (moves, resizes, rotations, framing, decorations) with the editor's standard history.

Changes save automatically (debounced) to the chapter; the save state is shown in the header.

Starting a layout

Chapters without a canvas open with a proposed vertical strip — the webtoon shape — which is not saved until you touch it. The auto-layout menu offers:

  • Vertical strip — a single column in reading order (distance-as-time gaps included). This alone gives you a webtoon-style work.
  • Graph ↓ / Graph → — layered layouts computed from the story graph (branches fan out top-down or left-right), the right starting point for 2D canvases with parallel paths.

Align and distribute tools work on any multi-selection.

Camera moves — click an edge

Selecting an edge opens the camera move inspector and draws the path ghost — the dashed line the camera will travel:

  • Zoom profile: hold, pull-back (zoom out to see both panels, glide, zoom back in — best for long hops), or dive.
  • Path: direct, arc, or waypoints — add waypoints and drag the dots directly on the board to bend the camera around spoilers or scenery.
  • Duration and easing complete the move. Without a custom move, the edge inherits the format's default camera move.

The inspector also shows the gap caliper: the world-unit distance between the two panels and its distance-as-time equivalent in beats (1 beat ≈ one viewport height). Use it to pace the reading rhythm deliberately.

Enter framing — where the camera lands

For a selected panel, Add enter framing draws a movable, resizable rect defining the sub-area the camera frames on arrival — e.g. the top third of a tall falling-scene panel, letting the reader roam down the rest. Reset to full panel clears it.

Reveal modes

The toolbar's reveal selector controls spoiler protection per panel:

  • Always visible (default)
  • On approach — revealed when the camera gets close
  • Hidden until visited — a veil covers the artwork until the trail arrives; recommended for secret branches and paywalled panels so the overview zoom can't leak them.

Decorations

Add decoration places an image asset (via the asset picker) as set dressing on the plane — arrows, scenery, trail markers. Decorations render beneath panels and are purely presentational. Select one to edit opacity, parallax depth (higher values trail the camera and read as depth), rotation, stacking, or to delete it.

Phone ribbon — will it read on a phone?

A canvas that flows in one column works on a portrait phone; one that spreads sideways makes phone readers pan. The Phone ribbon toggle in the toolbar overlays the column a phone reads: a band one panel wide (the median placement width — what the camera fits to a 390 px wide phone), centred on the panels, with a dashed tick for every phone screen of height. It is view-only, never saved, and remembered per browser.

While the ribbon shows, the board judges the layout as column-friendly or not, live as you move things (undo included):

  • a panel is flagged when its bounds (rotation included) leave the band — outlined red when mostly outside, amber when partly;
  • a step of the trail is flagged when it reads upward (dashed red) — the graph edges, or the panel order when the chapter has no edges yet.

A verdict chip next to the toggle sums it up — Column-friendly · 6 phone screens or Not column-friendly · …. The verdict is advice: it does not switch the Mobile portrait canvas-view toggle in Work Properties on or off (see Enabling canvas view for readers).

Camera policy

Two chapter-wide settings live in the board's toolbar:

  • Free roam: Guided only (camera moves only along the trail — the safe choice for phone-first works), Roam between moves (default), or Always free.
  • Fit: how arrivals fit a panel into the viewport (contain, cover, width, height).

Enabling canvas view for readers

Canvas view renders only for output formats that enable it. In Work Properties → Output, the Infinite Canvas View checkboxes write the per-format toggles. If a work has canvas chapters and no format enables the view yet, publishing applies safe on-screen defaults (landscape formats on, print always off) — readers always keep the panel-view fallback.

Previewing

The Preview tab's View selector switches the embedded player between Auto, Panel view, and Canvas view, so you can compare both reading experiences on the live manifest without changing settings.

Publish checks

The validation preflight enforces canvas integrity: placements pointing at deleted panels and canvases without placements block publishing; unplaced reachable panels and very large canvases (> 150 placements) warn.

Two more warnings protect the reading experience:

  • Paywalled panels visible in the overview — a panel behind an active paywall rule whose reveal mode is not On visit shows its paid artwork when readers zoom out. Set it to On visit.
  • Low resolution for the zoom — the camera zooms into panels, so artwork narrower than twice the placement width looks soft on high-DPI screens.

Deleting a panel — in the editor, or with the Fix button on an empty-panel issue — removes its placement from the canvas automatically, so a stale placement can no longer block publishing. If that leaves the canvas with no placements and no decorations, the canvas layout itself is removed; one that still has decorations is kept, and preflight asks you to place a panel on it.

Every canvas check has its own entry in the Validation Code Reference.