開發HTML代碼是一件簡單的事情，一個文字編輯器，然後一個支持HTML5的浏覽器即可（本人的浏覽器是Firefox8.0.1 ）。了解HTML的朋友應該知道，HTML5中最讓人興奮的API是canvas，它給了HTML5開發者隨意塗鴉的能力。下來我們一起來了解canvas。
HTML5中新增了<canvas>畫布標簽，通過它，可以使用JavaScript在網頁中繪制圖像。<canvas>標簽在網頁中得到的是一個矩形空白區域，可以通過width和height屬性來調整其寬和高。創建一個Canvas畫布的方法如下：
可以在標簽中添加<canvas>標簽不可用時的替代文本，如下所示：
建議測試以上代碼，以便了解canvas不可用的顯示
<canvas>標簽本身並不具備畫圖的能力，其本身只是為JavaScript提供了一個繪制圖像的區域，因此畫圖工作需要再JavaScript中完成。如下所示是畫圖之前需要的准備工作：
首先需要獲取到網頁中的畫布對象，然後用getContext()方法從畫布中得到二維繪制對象（傳統概念中的畫筆）。getContext()方法的參數”2d”即表示二維（據說以後會擴展到三維，而目前唯一可用的參數只有”2d”）。
得到的Context對象是HTML5的內建對象，其中包含了許多圖形繪制和調整的方法，在JavaScript中通過操作它即可以在Canvas畫布中繪制所需的圖形。
基礎API：
使用Context對象的fillText()方法能夠在畫布中繪制字符串。fillText()方法的原型如下：
void fillText(text, left,top, [maxWidth]);
其四個參數的含義分為是：需繪制的字符串，繪制到畫布中時左上角在畫布中的橫坐標及縱坐標，繪制的字符串的最大長度。其中最大長度maxWidth是可選參數。另外，可以通過改變Context對象的font屬性來調整字符串的字體以及大小，默認為”10px sans-serif”。
代碼實例：
運行效果：