版本：HTML5
元素可被用來通過腳本（通常是JavaScript）繪制圖形。比如，它可以被用來繪制圖形，制作圖片集合，甚至用來實現動畫效果。你可以(也應該)在元素標簽內寫入可提供替代的的代碼內容，這些內容將會在在舊的、不支持元素的瀏覽器或是禁用了JavaScript的瀏覽器內渲染并展現。
瀏覽器支持
| | | | |
| IE 9、Firefox、Opera、Chrome 和 Safari 支持標簽。 |
| 注釋：IE 8 或更早版本的 IE 瀏覽器不支持標簽。 |
示例
sorry, your browser doesn't support the <canvas>element.
如果你沒有設置元素的透明度，可以考慮使用moz-opaque屬性。下面給出的示例代碼可用于頁面渲染優化。但需要您注意的是，這個屬性目前還沒有被推廣開來，只能在基于Mozilla內核的瀏覽器內生效。
標簽定義及使用說明
- 標簽通過腳本（通常是 JavaScript）來繪制圖形（比如圖表和其他圖像）。
- 標簽只是圖形容器，您必須使用腳本來繪制圖形。
- 元素中的任何文本將會被顯示在不支持的瀏覽器中。
屬性
本元素支持全局屬性.
- height該元素占用空間的高度，以 CSS 像素（px）表示，默認為 150。
- moz-opaque尚未標準化通過設置這個屬性，來控制canvas元素是否半透明。如果你不想canvas元素被設置為半透明，使用這個元素將可以優化瀏覽器繪圖性能。
- width該元素占用空間的寬度，以 CSS 像素（px）表示，默認為 300。
注意事項
需要標簽
不同于元素,元素需要有閉合標簽().
設置畫布(canvas)的大小
可以通過CSS來控制的大小。在渲染的過程中元素中的內容會根據情況縮放來適應需要的大小。如果您發現元素中展示的內容變形，您可以通過自帶的height和width屬性進行相關設置，而不要使用CSS。
的歷史
這個 HTML 元素是為了客戶端矢量圖形而設計的。它自己沒有行為，但卻把一個繪圖 API 展現給客戶端 JavaScript 以使腳本能夠把想繪制的東西都繪制到一塊畫布上。
標記由 Apple 在 Safari 1.3 Web 瀏覽器中引入。對 HTML 的這一根本擴展的原因在于，HTML 在 Safari 中的繪圖能力也為 Mac OS X 桌面的 Dashboard 組件所使用，并且 Apple 希望有一種方式在 Dashboard 中支持腳本化的圖形。
Firefox 1.5 和 Opera 9 都跟隨了 Safari 的引領。這兩個瀏覽器都支持標記。
我們甚至可以在 IE 中使用標記，并在 IE 的 VML 支持的基礎上用開源的 JavaScript 代碼（由 Google 發起）來構建兼容性的畫布。參見：http://excanvas.sourceforge.net/。
的標準化的努力由一個 Web 瀏覽器廠商的非正式協會在推進，目前已經成為 HTML 5 草案中一個正式的標簽。參見：http://www.whatwg.org/specs/web-apps/current-work/
標記和 SVG 以及 VML 之間的差異
標記和 SVG 以及 VML 之間的一個重要的不同是，有一個基于 JavaScript 的繪圖 API，而 SVG 和 VML 使用一個 XML 文檔來描述繪圖。
這兩種方式在功能上是等同的，任何一種都可以用另一種來模擬。從表面上看，它們很不相同，可是，每一種都有強項和弱點。例如，SVG 繪圖很容易編輯，只要從其描述中移除元素就行。
要從同一圖形的一個標記中移除元素，往往需要擦掉繪圖重新繪制它。
如何使用標記繪圖
大多數 Canvas 繪圖 API 都沒有定義在元素本身上，而是定義在通過畫布的getContext()方法獲得的一個“繪圖環境”對象上。
Canvas API 也使用了路徑的表示法。但是，路徑由一系列的方法調用來定義，而不是描述為字母和數字的字符串，比如調用 beginPath()和 arc()方法。
一旦定義了路徑，其他的方法，如 fill()，都是對此路徑操作。繪圖環境的各種屬性，比如 fillStyle，說明了這些操作如何使用。
注釋：Canvas API 非常緊湊的一個原因上它沒有對繪制文本提供任何支持。要把文本加入到一個圖形，必須要么自己繪制它再用位圖圖像合并它，或者在上方使用 CSS 定位來覆蓋 HTML 文本。
屬性
HTML5 中的新屬性。
屬性值描述
| height HTML5新增 | pixels | 規定畫布的高度。 |
| width HTML5新增 | pixels | 規定畫布的寬度。 |
HTML 4.01 與 HTML 5 之間的差異
標簽是 HTML 5 中的新標簽。
全局屬性
標簽支持HTML 的全局屬性。
事件屬性
標簽支持HTML 的事件屬性。
實例
通過元素來顯示一個紅色的矩形：
var canvas=document.getelementbyid('myCanvas');var ctx=canvas.getcontext('2d');ctx.fillstyle='#ff0000';ctx.fillrect(0,0,80,100);
例子
function drawcanvas(){var canvas=document.getelementbyid('myCanvas');var ctx=canvas.getcontext('2d');ctx.fillstyle='#ff0000';ctx.fillrect(0,0,80,100);}...your browser does not support the canvas tag
