前言
HTML5 中引入了 canvas 元素，canvas 是動態生成位圖圖像（bitmap）的 JavaScript 框架。
基本的設置有點複雜，所涉及的對象本身設計得很差，這也是標準演變過程的實際縮減的結果。而 Canvas 元素值得我們學習和練習的原因是：它是 HTML 中圖形（graphics）和視頻等未來元素，單單這點就足以證明它的強大，不光如此，結合其自然棲息地的完整的腳本語言，它使得 JavaScript 語言更加靈活、能夠滿足全部的要求。
JavaScript對象的接口很混亂，操作沒有正確地分隔，方法的效果取決於奇怪的副作用和屬性設置。但是這些接口很小:內容表（contents table）的Part 2（待翻譯部分）已經提供了完整的摘要和概述。這樣減少到不到 20 個屬性和 35 個方法，就可以管理和理解 canvas 元素的全部特性。有了 HTML、CSS 和一點 JavaScript 知識，這個 Canvas 手冊足夠入門和日常工作的使用了。
概述
這本手冊由三個部分組成：
1、簡介
canvas元素的初體驗、簡單示例和基本設置。
2、完整介紹
這部分是 Canvas 手冊中最大的部分，涉及到的兩個主要JavaScript對象的全面參考:
1.HTMLCanvasElement和2.CanvasRenderingContext2D。
可以將第二部分看作畫布元素的官方[W3C]標準的用戶友好版本。屬性和方法的結構如文檔的參考摘要所示。
3、其他部分
對於CSS的一些元素，HTML5文件模板和部分額外工具和工具構建的說明。
如果您是初學者，請先閱讀第一部分，然後通過瀏覽第二部分以找到您需要的部分（接口或方法）。
與此文檔相關的網絡資源：
【主頁】這篇文檔的最新版本
【論壇】是關於此文檔和 canvas 主題的一個互動頁面。
鳴謝
有一些很好的在線資源讓我得以瞭解 canvas，特別是 Mozilla Developer Network的Canvas tutorial教程。
本手冊（英文版手冊）是用 Markdown 編寫的，並通過出色的 Pandoc 通用文檔轉換器轉換成HTML。
1. 簡介
1.1 正式標準
以下是描述和定義 canvas 元素的官方文件：
[W3C]：這部分是W3C (World Wide Web Consortium) 定義 HTML5 標準和 Canvas 元素的段落。
[WHATWG]：這部分是 (Web Hypertext Application Technology Working Group) 的Web應用程序規範草案的一部分，其中 canvas 元素部分沿用的標準是最初投入使用時的標準。
[W3C/2D]：這部分是HTML canvas 2D Context 的W3C描述
1.2 要求：支持 HTML5 和 JavaScript 的瀏覽器
canvas 元素是 HTML5 的一部分。如果你當前使用的瀏覽器因版本太舊或其他原因無法應用 HTML5標準，那麼同樣無法使用 canvas元素。
關於瀏覽器對 HTML5 、特別是 canvas 元素的支持，詳情可以在 caniuse.com 上找到。
此外，您的瀏覽器必須能夠並允許執行 JavaScript 代碼。幾年前，JavaScript 以惹惱用戶而聞名，在許多配置中，它被默認關閉。但是所有這些都是過去的事情了，如果你不想錯過 HTML5 的全部特性，尤其是canvas元素，就讓那些不愉快的事情就此遠去吧。
要理解這段文本，請確保您的瀏覽器是最新的，並且配置正確(請參閱下面的第一個示例作爲測試，以確保它能正常工作)。所有的插圖和示例都不是作爲 <img> 插入的，而是使用canvas元素插入的。
1.3 第一個示例
問候小盒
這是一個 canvas 圖片示例，在紅盒子裏展示了一個 “Hello” 問候語。
此圖的源代碼如下：
<canvas id="VeryFirstExampleCanvas" width=150 height=60>
GO AND UPDATE YOUR BROWSER BEFORE YOU READ ON!
</canvas>
<script>
var canvas = document.getElementById ('VeryFirstExampleCanvas'); // access the canvas object
var context = canvas.getContext ('2d'); // access the canvas context
context.fillStyle = 'red'; // set the color to 'red'
context.fillRect (0,0,150,60); // draw a red box on the whole of the canvas
context.fillStyle = 'yellow'; // set the color to 'yellow'
context.fillRect (5,5,140,50); // draw a yellow box inside the red one
context.fillStyle = 'red'; // set the color back to 'red'
context.font = '40pt Arial'; // define the CSS font for writing text
context.fillText ('Hello',10,50); // write the text 'Hello'
</script>
這個小示例已經包含了所有的基本成分和步驟，我們將在後面一遍又一遍地重複這些步驟。每個普通的 canvas 圖片都有兩部分代碼：
1、第一部分是 <canvas>...</canvas> 部分，它是 HTML 文件的一部分，代碼位於圖片展示位置。
canvas 擁有 width 與 height（原文寫 length 有誤）兩個屬性，他們以像素爲單位來定義矩形圖片的尺寸。在例子中使用的是 150px 的寬度與 60px 的高度。
<canvas>..</canvas> 標籤內的文本並不是 canvas 的內容，它只是一個所謂的“後退（fallback）”信息。這裏的信息只在瀏覽器無法處理 canvas 元素時會展示的。
2、代碼的第二部分是 JavaScript 腳本。在本例中，它被直接放在 <script>…< / script> 標記。這個代碼部分的位置是相當任意的，它經常被存放到單獨的.js文件中。該腳本通常執行三個步驟：
1、加載HTML <canvas> 標籤成爲 HTMLCanvasElement 對象。我們通過調用下列代碼將其保存在一個名爲 canvas 的變量中
var canvas = document.getElementById('VeryFirstExampleCanvas');
2、該圖不是直接在 HTMLCanvasElement 中生成的，而是在它所謂的上下文中生成的，一個內部 CanvasRenderingContext2D 對象，我們通過調用下列代碼將其保存在另一個名爲 context 的變量中
var context = canvas.getContext('2d');
現在，通過修改屬性和調用方法，剩下的全部代碼都設置爲在 canvas 上“繪製素材”：
context.fillStyle = 'red'; // set the color to 'red'
context.fillRect (0,0,150,60); // draw a red box on the whole of the canvas
context.fillStyle = 'yellow'; // set the color to 'yellow'
context.fillRect (5,5,140,50); // draw a yellow box inside the red on
context.fillStyle = 'red'; // set the color back to 'red'
context.font = '40pt Arial'; // define the CSS font for writing text
context.fillText ('Hello',10,50); // write the text 'Hello'
上下文是生成圖片內容的地方，描述其屬性和方法是本手冊的主要部分。但是爲了使用canvas元素，我們需要理解這些生成 canvas 的基本步驟。