開発の経緯
Fabric.js をよく使っているのですが、ひとつだけずっと引っかかっていることがありました。選択枠やリサイズハンドルが Canvas に描かれることです。
Canvas に描かれたピクセルなので、
- CSS でスタイルできない（製品のデザインに寄せるには描画コードを書き足すしかない）
- スクリーンリーダーから見えない（Canvas は支援技術にとって1枚の画像）
この2つは仕様上どうにもなりません。じゃあ 図形は Canvas、操作 UI は上に重ねた DOM にしたらどうなるんだろう、というのを Claude Code に作らせてみました。
成果物
できたものがこれです。
- サイト・デモ: https://headlesscanvas.com/
- リポジトリ: https://github.com/elephancube/headlesscanvas-js
-
npm install @headless-canvas/core @headless-canvas/ui（MIT）
┌─────────────────────────────────────┐
│ DOM オーバーレイ ― 選択枠・ハンドル │ ← CSS でスタイルできる／Tab でフォーカスできる
├─────────────────────────────────────┤
│ Canvas ― 図形・画像・テキスト │ ← ここには UI を一切描かない
└─────────────────────────────────────┘
ハンドルが実在の DOM 要素なので、こう書くだけで見た目が変わります。
.hc-handle { border-radius: 50%; }
.hc-handle[data-hc-handle='rotate'] { background: tomato; }
:root { --hc-accent: rebeccapurple; --hc-handle-size: 12px; }
使い始めはこれだけです。
import { 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)
ぜひ使ってみてください。
https://headlesscanvas.com/
まだプレビュー（0.1.x）で、スクリーンリーダー実機での検証が残っています。触ってみた感想や Issue をもらえるとうれしいです。
https://github.com/elephancube/headlesscanvas-js
また、GitHubでスターを付けていただくと励みになります！