コントロールを CSS で装飾できる
選択枠もハンドルも、文書化されたクラス名と data 属性を持つ実在の要素です。フォークせずに見た目を変えられます。
装飾ガイド
HeadlessCanvasハンドルは DOM 要素です
デザインツール・ホワイトボード・図表エディタ・注釈 UI のための Canvas エディタエンジン。図形は Canvas に描画し、選択 UI は CSS で装飾できる DOM です。MIT ライセンス、ウォーターマークなし、フレームワーク不要。
Konva や Fabric は選択ハンドルを図版と同じ Canvas に描画します。そこから2つの帰結が生まれ、どちらもアプリケーション側のコードでは回避できません。ハンドルを CSS で装飾できないこと、そして支援技術からまったく見えないことです。
HeadlessCanvas はこの2つを分離します。
┌─────────────────────────────────────┐
│ DOM オーバーレイ — 選択枠・ハンドル │ ← あなたの CSS・マークアップ、キーボード操作可能
├─────────────────────────────────────┤
│ Canvas — 図形・画像 │ ← 高速な描画。UI は一切描かない
└─────────────────────────────────────┘tldraw は同じ構成を採りますが、オープンソースではありません。本番利用にはライセンスキーが必要で、商用ライセンスを購入しない限りウォーターマークを外せず、あなたのプロジェクトを使う人もそれぞれライセンスを必要とします。HeadlessCanvas は MIT です。
| 描画 | コントロール UI | CSS で装飾 | スクリーンリーダー対応 | ライセンス | |
|---|---|---|---|---|---|
| HeadlessCanvas | Canvas | DOM | 可 | 可 | MIT |
| Konva.js | Canvas | Canvas | 不可 | 不可 | MIT |
| Fabric.js | Canvas | Canvas | 不可 | 不可 | MIT |
| tldraw | DOM/SVG | DOM | 可 | 一部 | 非オープンソース |
| Excalidraw | Canvas | DOM | 再利用可能なライブラリではなくアプリ | — | MIT |
npm install @headless-canvas/core @headless-canvas/uiimport { Editor } from '@headless-canvas/core'
import { createDefaultControls } from '@headless-canvas/ui'
import '@headless-canvas/ui/styles.css'
const editor = new Editor({ container: document.querySelector('#app')! })
createDefaultControls(editor)
editor.createShape({ type: 'rect', x: 40, y: 40, width: 160, height: 110 })準備はこれだけです。続きははじめるを参照してください。