本單元結合JavaScript語言的滑鼠事件程式技巧及上一單元介紹的畫布(Canvas)物件繪圖功能，製作一個網頁版的小畫家，功能包括塗鴉、選筆色、粗細以及匯出圖檔。當然因為Canvas物件屬於HTML5的新功能，必須使用IE9以上的版本或Google Chrome、FireFox等瀏覽器才能正確執行功能。
1.請開啟一個HTML網頁建立一個div物件，以樣式表設定寬400，高300像素一點粗的框線
2.切到原始檔，為此div加入onmousedown, onmousemove 與 onmouseup事件副程式md, mv 與 mup。
3.在div內部手動鍵入canvas標籤，寬與高如div，且設定id="m"，完成原始碼如下：
4.接著在body標籤加入onlod="init()"事件
5.在head區塊建立以下副程式如下：
繪圖程式說明：
- m是畫布物件，c是繪圖物件
- function init() 設定畫布與繪圖物件
- function md() 將筆(繪圖物件)移到起點，並設定繪圖模式為 true，這是讓 mousemove事件知道滑鼠是否壓下處於拖曳(繪圖)狀態之用，並用beginPath宣告此一筆畫開始。
- function mv() 先檢查是否應該繪圖，如果是(draw)就畫一個線段！
- function mup() 就是放掉滑鼠鍵應該要將繪圖狀態draw設為false(不繪圖狀態)，且宣告結束此一筆畫，這與後續的筆觸設定會有關係。
60分標準
此時已經可以用一點粗的預設黑筆進行塗鴉了！接下來請建立以下網頁介面，建立其他功能：
上面方塊就是之前設計的div圖層物件，下方方塊則是一個 Image物件，id設為 "img"，寬高與div一樣。
中間部分前兩行依序使用 Input(Radio)物件及文字製作，第三列是兩個 Input(Button)。
Radio物件若要正確切換，應將同一群組給予同樣的 "name"屬性，如下圖筆色部分取名為"R"，筆粗細部分取名為"W"。網頁部分完成後的原始碼大致如下：
此時各個選項應該可以呈現單選的切換！
請注意聽課，本範例原始碼絕大部分皆可使用軟體完成！只有div中的的canvas標籤須完全依賴手動輸入，因為到目前為止Visual Studio軟體還不認識 HTML5。這個標籤就是我們主要的的繪圖板了！下方的 Image物件則用於將canvas上繪製的結果輸出為影像物件。
70分標準
清除畫面與輸出影像的程式：
Image物件連上此繪出的影像即可讓成果以一個影像的方式呈現於下方的 Image物件之中，要存檔就按滑鼠右鍵另存圖片即可！
執行畫面如下：
80分標準
更改筆色選擇介面為色塊，如小畫家程式→10分
更改筆畫粗細為圖形介面，如小畫家程式→10分