Math Computation Modes Example

What are computation modes?

When solving a math expression, the result can be displayed in two different ways.

✏️ Draw Result

Result added as real ink strokes in the document — sent to backend, recognized and part of the model, fully interactive (move, resize, rotate, erase, select).
Frozen once computed: a draw result is computed once per block and never auto-recomputed or auto-erased afterward — not when the expression changes, not when a dependent block changes (e.g. x=2 → x=5 no longer touches an existing 2x= draw result).
To get a fresh result: erase the result stroke yourself (select it, then delete), or use Math menu → Force Compute all to wipe and recompute everything.

👻 Show Result (Ghost)

Result shown as SVG overlay at 50% opacity — not in model, not sent to backend, non-interactive (view only, can't be clicked or selected directly).
Live preview: recomputed only when the recognized result actually changes (no needless flicker) — as long as the block has no draw result yet.
Automatically cleared when the block no longer ends with = or ?. Once a block gets a draw result it freezes too: the ghost stops updating for that block entirely.

Auto-Compute

Automatically compute expressions when finishing a block ending with = or ?. After writing, the synchronized event triggers an auto-compute check — no manual "Compute" click needed.

Show Block Overlays

Toggle via ≡ → Math → Show Block Overlays. Displays boundaries, computed results, and status indicators on each recognized math block.

🔄 Force Compute all

Via ≡ → Math → Force Compute all. The only way to refresh a frozen draw result: clears every block's result strokes — draw and ghost — then recomputes every math block from scratch in the currently selected result mode.

Selection & Transform

Selecting one stroke of an expression selects the whole block, including its draw result. Moving, resizing or rotating a selected block carries its result along with it — draw result strokes transform like normal strokes, and a live ghost preview follows the drag too.

// Ghost mode — live preview, safe for auto-compute
canvas.math.updateComputationConfig({ resultMode: "ghost", autoCompute: true })

// Draw mode — result persists, computed once per block
canvas.math.updateComputationConfig({ resultMode: "draw", autoCompute: true })

// Wipe everything (draw + ghost) and recompute all blocks
await canvas.math.clearAllSolverOutputs()
await canvas.math.computeAllNumericalResults()

Try it

1. Write 5+3= (with equals sign)
2. With auto-compute on → result appears instantly
3. Toggle Auto-compute via ≡ → Math to see difference
4. Switch Result mode to compare Draw vs Ghost
5. Toggle Show Block Overlays to see block boundaries

Ghost mode:
1. Select "Show result" + enable "Auto-compute"
2. Write 5+3= → ghost result appears immediately
3. Modify the expression → ghost updates in real time
4. Move the expression around → the ghost preview follows it
5. Remove the = → ghost disappears automatically

Draw mode:
1. Select "Draw result" + enable "Auto-compute"
2. Write 5+3= → result added as ink strokes
3. Modify the expression (e.g. change 3 to 30) → result stays 8, untouched — draw is frozen
4. Write x=2 then 2x= → both computed
5. Change x=2 to x=5 → 2x= result stays 4, not auto-updated
6. Drag the expression somewhere else → its draw result moves with it
7. Use Math menu → Force Compute all to wipe and recompute every block fresh