このツールの機能
ペインターは、シンプルなcanvasベースの描画ツールです。フリーハンドブラシで描き、図形(四角、円、線)を追加、消しゴムを使用、テキストを追加、カスタム背景色を設定。canvasをPNGでダウンロード。クイックスケッチ、注釈、図、シンプルなアートに便利。すべての描画はブラウザで—サーバーなし。
使い方
- ツールを選択 — ブラシ、図形、消しゴム、テキストを選択。
- 描く — ブラシや図形はクリック&ドラッグ。テキストはクリックで配置。
- 設定 — ブラシサイズ、色、塗りつぶしを設定。図形では線と塗りつぶしを選択。
- 背景 — 必要に応じてcanvasの背景色を変更。
- ダウンロード — canvasをPNG画像で保存。
- クリア — canvasをリセットしてやり直し。
動作の仕組み
canvasはHTML5 Canvas要素。描画は2Dコンテキストを使用:ブラシと消しゴムはパス、図形はrect/arc/line、テキストはfillText。マウス/タッチイベントがストロークと図形をキャプチャ。canvasの状態はメモリに保存;ダウンロードは toDataURL('image/png') を使用。コア描画用の外部ライブラリなし—vanilla canvas API。blob URLはダウンロード時のみ使用。
すべての計算はブラウザ内で実行されます。データはサーバーに送信されません。
使用例とサンプル
- スケッチ — クイックな図や落書き。
- 注釈 — スクリーンショットや図にマークアップ。
- 図 — シンプルなフローチャートやワイヤーフレーム。
- 署名 — クイックな署名をキャプチャ。
- 教育 — 図形と色をデモ。
例
- ブラシ、赤、サイズ5 → 赤いフリーハンド線を描く。
- 四角ツール → クリック&ドラッグで四角を描く。
- テキストツール → クリックでテキストを配置;ダイアログで入力。
制限と既知の制約
- レイヤーなし — 単一レイヤー;クリア以外のundo/redoなし。
- 永続化なし — canvasの状態は再読み込みで失われる。
- 基本ツール — グラデーション、パターン、高度なフィルターなし。
- PNGのみ — ダウンロード形式はPNG;JPEGやSVGエクスポートなし。