**最適合：**協作寫作、長篇文件、程式碼除錯，以及需要反覆修改的專案。

Google Gemini Canvas（2026 年版）

Gemini 的 Canvas 工作區讓你可以即時撰寫與編輯文件或程式碼，所有變更會直接顯示在螢幕上 。

如何使用：

• 點擊 Gemini 提示列下方的 Canvas 按鈕，即可從標準對話切換至互動式工作區 。
• 使用浮動快速編輯工具列，標記特定文字後即可立即變更語氣、調整長度或修正格式錯誤。
• 針對程式碼，你可以生成 HTML/CSS/JS 並即時預覽變更結果。

**最適合：**建構網頁應用程式、即時預覽文件編輯、快速原型開發。

Mistral le Chat Canvas

Mistral 的 Canvas 是一個內建編輯器，可讓你在對話中直接與 AI 協作，建立與修改文字、程式碼、試算表等內容 。

如何使用：

• Canvas 預設為關閉狀態。若要開啟，請點選聊天視窗底部的 Tools 選單，勾選 Canvas 旁的方塊 。
• 啟用後，你只需像平常一樣與 AI 對話，它便會在需要時自動開啟 Canvas。
• 你也可以在提示中輸入 / 並選擇「開啟新 Canvas」來手動啟動 。

**最適合：**快速內容創作、試算表編輯、簡單的文字或程式碼生成。

自製 HTML5 Canvas 文字編輯器

對於需要從頭使用 HTML5 <canvas> API 建構文字或程式碼編輯器的開發者來說，方法截然不同——你必須手動重新實作所有文字編輯的基本功能，因為 canvas 元素本身不具備原生的文字輸入能力。

核心步驟：

• 擷取鍵盤事件：監聽視窗的鍵盤事件，並將按鍵輸入寫入 canvas 。
• 實作游標定位與文字選取：根據 Infinite Canvas 教學，要在 canvas 上建立文字編輯器，必須從零開始實作游標移動、選取矩形以及 IME 輸入法組成等功能 。
• 使用文字測量 API：利用 ctx.measureText() 以及較新的 Canvas Text Metrics API（如 getIndexFromOffset、getSelectionRects），將像素位置對應回字元索引 。這些由 Igalia 提出的新 API 能減少自訂 JavaScript 解決方案的需求 。
• 雙擊文字進入編輯狀態 。
• 善用函式庫：像 Konva.js 或 KineticJS 這類函式庫，透過提供圖層、碰撞偵測與變形控制點，能大幅簡化開發流程 。

**替代方案：**在許多情況下，使用 textarea 或 contenteditable 等 HTML 元素會比在 canvas 上建構完整編輯器來得容易 。只有在你需要像素級別的控制力（例如設計工具或自訂繪圖應用程式）時，才考慮 canvas 方案。

你該選哪種畫布？

**總結：**如果你是個作家或程式設計師，直接使用 AI 畫布工具就對了。如果你正在建構一個需要精確渲染的客製化應用程式，HTML5 canvas 方案能給你完全的控制力——但請做好投入額外開發心力的準備。

**最適合：**協作寫作、長篇文件、程式碼除錯，以及需要反覆修改的專案。

Google Gemini Canvas（2026 年版）

Gemini 的 Canvas 工作區讓你可以即時撰寫與編輯文件或程式碼，所有變更會直接顯示在螢幕上 。

如何使用：

• 點擊 Gemini 提示列下方的 Canvas 按鈕，即可從標準對話切換至互動式工作區 。
• 使用浮動快速編輯工具列，標記特定文字後即可立即變更語氣、調整長度或修正格式錯誤。
• 針對程式碼，你可以生成 HTML/CSS/JS 並即時預覽變更結果。

**最適合：**建構網頁應用程式、即時預覽文件編輯、快速原型開發。

Mistral le Chat Canvas

Mistral 的 Canvas 是一個內建編輯器，可讓你在對話中直接與 AI 協作，建立與修改文字、程式碼、試算表等內容 。

如何使用：

• Canvas 預設為關閉狀態。若要開啟，請點選聊天視窗底部的 Tools 選單，勾選 Canvas 旁的方塊 。
• 啟用後，你只需像平常一樣與 AI 對話，它便會在需要時自動開啟 Canvas。
• 你也可以在提示中輸入 / 並選擇「開啟新 Canvas」來手動啟動 。

**最適合：**快速內容創作、試算表編輯、簡單的文字或程式碼生成。

自製 HTML5 Canvas 文字編輯器

對於需要從頭使用 HTML5 <canvas> API 建構文字或程式碼編輯器的開發者來說，方法截然不同——你必須手動重新實作所有文字編輯的基本功能，因為 canvas 元素本身不具備原生的文字輸入能力。

核心步驟：

• 擷取鍵盤事件：監聽視窗的鍵盤事件，並將按鍵輸入寫入 canvas 。
• 實作游標定位與文字選取：根據 Infinite Canvas 教學，要在 canvas 上建立文字編輯器，必須從零開始實作游標移動、選取矩形以及 IME 輸入法組成等功能 。
• 使用文字測量 API：利用 ctx.measureText() 以及較新的 Canvas Text Metrics API（如 getIndexFromOffset、getSelectionRects），將像素位置對應回字元索引 。這些由 Igalia 提出的新 API 能減少自訂 JavaScript 解決方案的需求 。
• 雙擊文字進入編輯狀態 。
• 善用函式庫：像 Konva.js 或 KineticJS 這類函式庫，透過提供圖層、碰撞偵測與變形控制點，能大幅簡化開發流程 。

**替代方案：**在許多情況下，使用 textarea 或 contenteditable 等 HTML 元素會比在 canvas 上建構完整編輯器來得容易 。只有在你需要像素級別的控制力（例如設計工具或自訂繪圖應用程式）時，才考慮 canvas 方案。

你該選哪種畫布？

**總結：**如果你是個作家或程式設計師，直接使用 AI 畫布工具就對了。如果你正在建構一個需要精確渲染的客製化應用程式，HTML5 canvas 方案能給你完全的控制力——但請做好投入額外開發心力的準備。