Canvas Kit

Add marker, highlighter, tape, text tool, quick drag-out card, make new notes or embed straight in the canvas FAST. Interactive table. Your canvas power house with annonations.

Ink is stored as inline SVG inside ordinary canvas text nodes — no separate files, no drawings folder. Everything lives in the canvas file itself.

Tools

• Select Area (S) — drag a marquee to select everything it touches, then move or delete the lot. Especially handy on iPad, where drag-to-select isn't otherwise available. While any tool is active on touch devices: two-finger tap = undo, three-finger tap = redo, and two fingers pan/pinch-zoom the canvas.

• Draw Kit (M) — Smooth freehand Marker,Highlighter, Washi Tape with different designs (you can also upload any image and it will become a tape).

  

• Just Text Please (T) — click anywhere and start typing, no outline or nested in a card. Supports markdown. Resize a text to scale it uniformly, recolor it with the node's color button, and re-open it for editing via the Edit button.

  

• Better Cards (C) — Create and resize your card in a single drag. Quick add existing note and new note.

  

  A sub-toolbar picks what the card is:

  • Empty — a blank card.
  • New note — creates a note in your vault and embeds it in one gesture.
  • Existing note — pick a note from an inline search and drop it in.
  • A blank card also shows new note / embed buttons on its edge while selected, so you can turn it into a new or existing note in place.

• Drag and Make Section (G) — Similar to Figma's frame tool: drag a marquee to create a section; then you can rename the section straight away.

• Table (B) — drag to set rows × columns; a borderless, interactive table you can edit in place. Drag the row/column handles to reorder, click a handle to select a row/column (then delete it with the trash button or Delete), and drag the dividers to resize.

  

• Image (I) — a previewable image picker: search your vault's images as thumbnails, or upload one from your computer, then drag to place it.

  

Tips

• Right-click exits the current tool (back to Select). Right-clicking while editing text finishes the edit.
• The draw button remembers the last sub-tool you used and reopens it.

Settings

• Toolbar size — scale the toolbar to taste.
• Hide Obsidian's bottom bar — hide the built-in add-to-canvas bar (Canvas Kit replaces it).
• Default marker color / size, default text size, and a slot to remove a custom tape image.
• Handwriting to text — MyScript application + HMAC keys and the recognition language.

Install

From Community Plugins

Settings → Community plugins → Browse, search for Canvas Kit, install, and enable. (Pending review.)

Manual

1. Download main.js, manifest.json, and styles.css from the latest release.
2. Copy them into <vault>/.obsidian/plugins/canvas-kit/.
3. Reload Obsidian and enable Canvas Kit in Settings → Community plugins.

Caveats

• Canvas has no official plugin API; this relies on undocumented internals (e.g. posFromEvt, createTextNode, createFileNode, createGroupNode, removeNode) and may need a patch after an Obsidian update.
• On devices without the plugin, ink nodes render as the raw SVG markup (or whatever Obsidian's markdown HTML rendering makes of it) and borderless nodes get their frame back — content is never lost, only styling.

Development

npm install
npm run dev    # watch build
npm run build  # type-check + production build

License

MIT © yaye.work

Support

Thank you for using Canvas Kit! If you run into a bug or have an idea, please open an issue. Feature requests and bug reports are very welcome.

And if you find CanvasKit useful, you can:

It's genuinely appreciated.

Happy noting! Yaye