これは、Canvas で行おうとすると眉をひそめます。HTML5 Canvas 仕様自体は、そうしようとしないことを強く勧めています。仕様が言うように：
作成者は、canvas 要素を使用してテキスト編集コントロールを実装することを避ける必要があります。そうすることには、多くの欠点があります。
- キャレットのマウス配置を再実装する必要があります。
- キャレットのキーボード移動を再実装する必要があります (複数行のテキスト入力の場合、複数行にわたる可能性があります)。
- テキスト フィールドのスクロールを実装する必要があります (長い行の場合は水平方向、複数行入力の場合は垂直方向)。
- コピー アンド ペーストなどのネイティブ機能を再実装する必要があります。
- スペル チェックなどのネイティブ機能を再実装する必要があります。
- ドラッグ アンド ドロップなどのネイティブ機能を再実装する必要があります。
- ページ全体のテキスト検索などのネイティブ機能を再実装する必要があります。
- ユーザー固有のネイティブ機能 (カスタム テキスト サービスなど) を再実装する必要があります。各ユーザーには異なるサービスがインストールされている可能性があり、そのようなサービスには無限のセットがあるため、これはほぼ不可能です。
- 双方向テキスト編集を再実装する必要があります。
- 複数行のテキスト編集では、関連するすべての言語に対して行の折り返しを実装する必要があります。
- テキスト選択を再実装する必要があります。
- 双方向のテキスト選択のドラッグを再実装する必要があります。
- プラットフォーム ネイティブのキーボード ショートカットを再実装する必要があります。
- プラットフォーム ネイティブのインプット メソッド エディター (IME) を再実装する必要があります。
- 元に戻す機能とやり直し機能を再実装する必要があります。
- キャレットまたは選択に続く拡大などのアクセシビリティ機能を再実装する必要があります。
この種のものを Canvas に実装することは悪夢です。特に今日では、同じフォントがブラウザごとに異なるだけでなく、フォントをレンダリングする Canvas とフォントをレンダリングするブラウザの間でも異なって見えます。
canvas で作成された Mozilla Bespin のコードを参照することをお勧めします。最終的には Mozilla Skywriter になり、最終的に「Welp canvas はこの仕事には不適切なツールだ」と断念し、Canvas ではなく DIV を使用する Ace に統合されました。この種のことに本当に興味がある場合は、これらのプロジェクトのコードを確認することを強くお勧めします。Canvas を使い始めたばかりの頃は、bespin コードに大いに助けられました。
肝心なのは、テキスト編集を行う場合は、DIV と入力、およびその他の HTML 要素を (一時的に) キャンバスの上で使用することです。キャンバスでエミュレートしようとしないでください。とにかく試すことはできますが、あなたもユーザーも同じように苦労することになります。
キャンバス上の複数行のテキストに関する限り、現時点ではすべて自分で計算する必要があります。テキストの高さを概算する必要さえあります。
単純なエディターを実際に実装するための私の推奨事項は次のとおりです。キャンバスを用意し、おそらく複雑な図形にテキストを描画します。おそらく図をクリックしてテキストを編集したい場合は、(複数行またはそうでない) HTML 入力要素をクリック イベントに表示します。Enter キーまたは Esc キーを押すか、ボックスがフォーカスを失ったとき (blurイベント)、変更をコミットします。