Canvas API 是 HTML5 Web API 中的重要功能，為開發者提供了強大的 2D 繪圖工具，能用於動畫、互動遊戲、數據可視化（像是前端熟悉的 EChart）。

Canvas 的誕生與崛起

在開始說明原理以及實作之前，先來介紹 Canvas 誕生以及崛起的歷史～ 🔅

回到 2004 年：Dashboard 的技術挑戰

要瞭解 Canvas 為什麼重要，我們得先回到 2004 年。當時 Apple 正在開發桌機 Safari Mac OS X Tiger 的一個重要新功能：Dashboard，一個讓使用者快速存取小工具的介面，包括時鐘、天氣預報、股票報價、計算機等。

參考文章及圖片來源：Macworld - Discovering the Dashboard

技術難題：網頁缺少繪圖能力

但有個問題：當時的網頁技術無法滿足 Dashboard 的需求。

這些 Dashboard Widgets 完全是用網頁技術開發（HTML + CSS + JavaScript），但當時的網頁：

• HTML + CSS：只能畫靜態的矩形、文字、邊框，沒有「自由繪製像素」的能力
• SVG：向量圖雖然能畫圖形，但適合靜態場景，大量動畫一跑就卡（1999 年提出，2001 成為 W3C Candidate）
• Flash：唯一能做豐富互動圖形的選擇，但是專有插件

Apple 不想讓 Dashboard Widgets 依賴第三方插件，他們需要一個原生的、標準的解決方案。

👉 問題核心：網頁缺少一種標準 API 能「在一塊畫布上，逐像素、程式化地繪製」。

Canvas 的誕生

於是，Apple 在桌機版 Safari WebKit 中首次實作了 <canvas> 與 2D API。讓 Dashboard 的時鐘 Widget 可以用 JavaScript 直接繪製時鐘面板、指針動畫等複雜圖形。

它的設計理念很直接：將 Mac OS X 的 Quartz 2D 繪圖系統暴露給 JavaScript 和 HTML，讓開發者能夠直接在網頁中進行 2D 繪圖。

結果是：開發者只要呼叫 ctx.fillRect()、ctx.drawImage() 等 API，就能直接操控像素，繪製時鐘指針、股票走勢圖，甚至小遊戲。這是當時網頁前所未有的突破。

意外的影響：開啟 Web 新紀元

有趣的是，3 年後（2007年）第一代 iPhone 發布時，Canvas 才首次在行動裝置上出現。iPhone 不支援 Flash，以及之後力挺 HTML5，算是開了 Flash 沒落的第一槍。

延伸閱讀：Adobe Flash 將成歷史，崛起與沒落正是網路行動化的過往篇章

Canvas 的設計哲學

Canvas 與 DOM / SVG 最大的不同：

• DOM / SVG → 你畫的每個元素都會成為 DOM 節點，瀏覽器會幫你管理這些節點，提供事件綁定、樣式修改、層級控制等功能。
• Canvas → 並沒有節點樹，而是一塊 bitmap buffer。你畫上去的東西會直接「變成像素」，瀏覽器不會記得那原本是矩形、圓形，或任何物件。

👉 因此，Canvas 的本質就是「一張持續被改寫的 bitmap」。

👉 Canvas 不會替你維護物件狀態，一切都要靠程式碼管理。效能上更高效，但圖形狀態與重繪邏輯都要開發者自行處理。

能做什麼？

透過 Canvas 的 2D API（如 ctx.fillRect()、ctx.drawImage()、ctx.getImageData()，開發者可以直接操控像素內容，實現各種功能：

• 圖表繪製
• 影像處理（濾鏡、特效）
• 動畫與遊戲畫面

這些操作不再依賴外掛，也不需要靠 DOM 元素硬撐。

再次提醒：Canvas 內容是像素繪製，非 DOM 節點，由 Web API 操作畫布

Canvas 本身是 DOM 元素，但內容（如圖形、圖片、文字）但內容是「像素繪製」，不是 DOM 節點，不涉及 DOM 節點的管理，從而節省性能開銷～ Web API 則是提供方法讓程式碼操作這些像素內容。
可以想像成：Canvas 是一塊空白畫布，Web API 是「畫筆」。

參考 EChart 的圖：Canvas 本身是 DOM 元素。

補齊的缺口

所以說，Apple 發明 <canvas>，其實是同時解決了 功能缺口 與 效能缺口：

• 功能：過去沒有原生 bitmap 繪圖 API。
• 效能：DOM 與 SVG 在複雜動畫下太慢。

這也是為什麼到了 2010 年，所有主流瀏覽器都陸續支援，最後在 2014 年 W3C 正式將 HTML5（包括 Canvas）標準定案。

小結

Canvas 的出現，讓 JavaScript 第一次能像桌面程式一樣「直接畫圖」，也因此開啟了網頁遊戲、圖像處理、資料視覺化的大門。

👉 歡迎追蹤這個系列，我會從 Canvas 開始，一步步帶你認識更多 Web API 🎯