Report Canvas
The Report Canvas is a visual workspace for building professional engineering calculation documents. Instead of cramming formulas, notes, and results into spreadsheet cells, you place them in freely-positioned boxes on a canvas.
Box types
The canvas supports seven box kinds: text, variable, equation, chart, plot,
table, and drawing.
Calculation boxes (variable, equation, text)
These are the core building blocks. When you type into a box, EngCanvas automatically classifies it:
| Classification | Content | Display |
|---|---|---|
| variable | L = 20 ft | LaTeX-rendered assignment with result |
| equation | Mmax = w * L^2 / 8 | LaTeX-rendered formula with evaluation |
| text | Plain text without = | Rendered as text/heading |
Variable and equation boxes evaluate their formulas and display the result in mathematical notation using KaTeX.
A variable box can also be turned into a dropdown — instead of typing a value, you pick from a fixed list of choices. This is how the built-in templates expose options like bar size or code edition.
Chart boxes
Insert from Insert → Chart. Chart boxes are the current, fully-configurable charting box, rendered with ECharts and edited through the chart editor panel.
Plot boxes
An older, simpler 2-D plot box rendered with Chart.js. It's still supported for existing reports, but new work should use a chart box.
Table boxes
Structured tabular data embedded in the canvas. Table cells can be referenced from other boxes using the syntax:
TableName[A1] // single cell
TableName[A1:C10] // range
Drawing boxes
Embed a drawing from a Drawing tab. The box renders a live preview and carries an Open Drawing button that jumps to the full editor. See Drawings.
Working with boxes
Creating a box
There are three ways:
- Move the cursor to an empty spot with the arrow keys, then press Enter — or just start typing, and a box is created seeded with what you typed
- Press Shift+A to add a box directly
- Press A to switch to the Add tool, then click where you want the box
A new box starts in edit mode — type your formula or text.
Editing a box
- Double-click a box to enter edit mode
- Type your formula (e.g.,
fb = M * c / I) - Press Escape or click outside to commit and switch to render mode
Box modes
| Mode | Shows | How to enter |
|---|---|---|
| edit | Raw input text | Double-click the box |
| render | LaTeX-formatted result | Press Escape or click outside |
Selecting and moving
- Click a box to select it (blue border appears)
- Drag a selected box to reposition it
- Shift+Click to add/remove from multi-selection
- Selected boxes can be moved together
Z-order (stacking)
Each box has a z-index that controls stacking order. Higher z-values render on top of lower ones.
Variable sharing
All boxes on a canvas share a variable scope. Variables defined in one box are available in all subsequent boxes:
// Box 1: Define inputs
b = 12 in
h = 24 in
// Box 2: Use variables from Box 1
A = b * h // → 288 in^2
// Box 3: Reference Box 2's result
rho = A_s / A // uses A from Box 2
Box references
You can reference a box's result by its ID:
Box7 // the evaluated result of Box 7
Box IDs are assigned sequentially (Box1, Box2, etc.) and shown in the box header.
Evaluation flow
- Box source text (
src) is parsed and tokenized - The expression is evaluated with the canvas variable scope
- Results are stored in the box model
- LaTeX rendering displays the formatted result
- Changes propagate to dependent boxes
Canvas operations
Copy and paste
- Ctrl+C / Cmd+C — copy selected boxes
- Ctrl+V / Cmd+V — paste boxes at a new position
- Pasted boxes get new IDs but preserve their formulas
Undo and redo
- Ctrl+Z / Cmd+Z — undo the last operation
- Ctrl+Shift+Z / Cmd+Shift+Z — redo
All box operations (create, move, edit, delete) go through the command history system, so every action is undoable.
Keyboard shortcuts
| Key | Action |
|---|---|
| A | Switch to the Add tool |
| Shift+A | Add a new box |
| V | Switch to the Select tool |
| F | Fit the selected box to the full page width |
| Enter | Edit the box under the cursor, or create one in empty space |
| Arrow keys | Move the cursor between boxes |
| Shift / Ctrl / Alt + Arrow | Nudge selected boxes by 40 / 8 / 1 px |
| Ctrl+A | Select all boxes |
| Delete | Delete selected boxes |
| Escape | Deselect / exit edit mode |
| Ctrl+Z | Undo |
| Ctrl+Shift+Z | Redo |
See Keyboard Shortcuts for the complete list.
Layout
Two layout modes, set from View → Arrange:
- Off — free-form. You place every box exactly where you want it.
- Section band — boxes flow into stacked bands. Each band has a main column for the calculations and an aside column for a related drawing, table, or chart. Bands reflow automatically when a section is hidden.
Spacing presets (Tight / Normal / Airy) control the density of the whole report.
PDF export
- Open Print Preview from the View ribbon
- Review the layout — pages, cover, header/footer, and table of contents
- Print to PDF
The export is vector: EngCanvas builds real per-page DOM and lets the browser paginate and print it. Text stays selectable, KaTeX math stays crisp at any zoom, and files stay small. Charts are embedded as high-DPI images.
Turn on View → Page Layout to see page boundaries on the canvas and insert manual page breaks where you want them.
Next steps
- Your First Report — step-by-step tutorial
- Spreadsheet Grid — the grid-based calculation view