Canvas export

canvas-export

Turn canvas content into portable files for sharing, alongside the source .tldraw so exports stay version-adjacent.

The canvas is programmable — canvases can carry animated/interactive elements (tick-loop animation, React shape widgets), which export as a static frame. When the user wants the motion or interactivity itself, share the .tldraw file (its document script travels with it) and pair with the canvas-widget skill.

Before you start

• Read references/shared/bridge.md (bundled with this skill) and references/shared/conventions.md.
• Read ./reference.md — the export API contract (editor.toImageDataUrl / toImage / getSvgString) and the pipeline. The /exec sandbox has NO filesystem: the export call returns a base64 data URL (or SVG string) and YOU decode and write the file. The live app's /readme and api.recipes outrank these notes on newer app versions.

Target & scope

Operate on the focused doc (api.getFocusedDoc). Ask what to export if unclear:

• page — everything on the current page,
• selection — the user's current selection,
• frames/slides — one file per frame (natural for decks: slide-01.png, …).

Output location & naming

Write next to the source file: <same-dir-as-.tldraw>/exports/<basename>/… — except when the .tldraw already sits in its own artifact folder (the dir name equals the file's basename, the presentations convention): then write to <dir>/exports/ directly, no redundant nesting. Naming: <canvas-name>.png / .svg for a whole page; slide-<order>.png per slide; <frame-name>.png per frame. kebab-case, zero-padded orders.

Workflow

1. Resolve the doc + its filePath; compute the exports/ dir beside it (create if missing).
2. Export via /exec: editor.toImageDataUrl(ids, { format:'png', scale:2, background:true }) (or getSvgString for vector); for per-frame, iterate frames in meta.order, passing each frame's id.
3. Decode the returned base64 payload yourself and write the files to the exports dir; return the paths. Verify pixel dimensions = scale × the returned logical size.

Verify (once)

The expected files exist on disk with non-zero size; open one to confirm it rendered (raster) or is valid XML (SVG).

Report

Doc id/name, scope exported, format, and the list of written file paths.

Fallback

api.getScreenshot (JPEG to a temp path) is a throwaway-preview tool, not an export: viewport-bound, lossy, temp-dir. Use it only when the user wants a quick look, never for a saved artifact — and never report an export path you did not confirm exists on disk. PDF export needs the app's built-in Export UI.