Draw it instead: the new Canvas block

Some ideas are faster to sketch than to type — a quick diagram, a layout thumbnail, an arrow pointing at the thing you actually mean. noteloom's newest block type is a real freehand drawing surface, sitting right alongside your paragraphs and tables, not bolted on as a separate "insert image" workaround.

What it does

Type "/canvas" and you get a resizable box with a full toolbar:

• A pressure-aware pen, plus an eraser
• Resizable text, dropped anywhere on the canvas
• Rectangle, ellipse, and arrow shapes, each with independent stroke and fill colors

A fixed coordinate space, not raw pixels

Every stroke point and shape is authored in a fixed 0–1000 normalized space, decoupled from the block's own rendered width/height. That sounds like an implementation detail, but it's the whole reason resizing a canvas doesn't distort or re-flow the drawing — the block just changes how big that fixed space is drawn, the underlying data never moves:

{
  "type": "canvas",
  "props": {
    "strokes": [{ "id": "s1", "color": "#6c5ce7", "size": 4, "points": [[100,100,0.6],[140,160,0.7]] }],
    "shapes": [{ "id": "sh1", "type": "rect", "x": 300, "y": 60, "width": 160, "height": 100 }],
    "width": 480,
    "height": 320
  }
}

Same normalized-document philosophy as every other block: plain data you could generate, diff, or replay, not an opaque binary blob.

Exports as real SVG, not a screenshot

A canvas bakes down to a self-contained inline <svg> as part of the document's normal HTML export — the exact same path clipboard copy and exportDocumentHTML already use for every other block. No rasterizing to a PNG, no separate image asset to host; copy a note with a drawing in it into another app and the drawing comes with it, still crisp at any zoom level.

What it doesn't do yet

Deliberate v1 scope, not oversights:

• No plain-text representation — a drawing has nothing meaningful to say as text, so it exports as empty rather than guessing.
• Pasted foreign SVG markup doesn't reverse-parse back into editable strokes — a canvas can only be created via its own slash command for now.

Give it a try in the demo above, or read the full reference for every prop and the exact stroke/shape data shapes.