在使用Canvas 2D Context之前，先看看他有哪些能耐。
2D Context有一些全域屬性，這些屬性會與許多繪圖的動作相關，為了方便管理，2D Context提供了一個簡單的方法：用save()就可以把目前的環境存到堆疊，然後呼叫restore()就可以取出之前放入堆疊的屬性。這是一個堆疊的操作，所以save()就相當於push的動作，restore()則相當於pop的動作。save跟restore只會影響到一些全域的屬性，跟繪圖，尤其是已繪製的圖形是沒有關係的，並不能用來做undo。

一些最常用的屬性包含：

1. globalAlpha：影響繪製的透明度（不是Canvas的背景透明度）
2. globalCompositionOperation：影響影像繪製到Canvas上的方式，預設是直接覆蓋，但是也可以選擇其他組合已存在影像與將繪製影像的方法，例如各種顏色運算，明度優先，xor等等。
3. fillStyle / strokeStyle：影響圖形填色與外框繪製的風格，可以用文字指定，其實就是CSS指定顏色的語法。另外也可以指定為漸層(Gradiant)或花色(Pattern)物件
4. lineWidth / lineCap / lineJoin / miterLimit：影響線條寬度、端點形狀、組合方式以及線段接合長度限制（需要linJoin指定為miter才有作用，舉例來說，兩個寬度5的線段以銳角接合時，接合處的長度可能會很長，miterLimit就是指定這個長度的限制）
5. font / textAlign / textBaseline：指定字型、文字對齊方式、行的垂直對齊方式
6. shadowOffsetX / shadowOffsetY / shadowBlur / shadowColor：指定圖形陰影的樣式，包含與圖形的偏移、模糊化程度與顏色

另外，有一些無法直接操作的屬性，例如變形矩陣，必須透過一些方法來操作，但是也屬於內建的全域屬性。

這些屬性，都可以透過save()與restore()來操作。

接下來看一些繪製方法，首先是與路徑相關的：

1. beginPath：重設路徑，接下來的路徑會加入到同一個集合
2. moveTo：直接移到某個點，不加入路徑。通常在開始繪製時，需要把啟始點移到指定位置，就可以用這個方法
3. lineTo：繪製直線路徑從目前的位置到指定的位置
4. arcTo：繪製弧線路徑從目前位置到指定位置
5. beizierCurveTo：繪製貝茲曲線從目前位置到指定位置
6. rect：繪製矩型
7. arc：繪製弧形
8. closePath：關閉路徑，要關閉才能用stroke或fill來繪製
9. stroke：繪製路徑的線條
10. fill：在路徑中填色
11. clip：利用路徑當做裁切區域，不過區域必須被路徑封閉才有效

要繪製矩型的話，並不需要呼叫繪製路徑的方法，可以直接使用：

1. fillRect：繪製實心（填色）的矩型
2. strokeRect：繪製空心（外框）的矩型
3. clearRect：將矩型內所有的pixel清除

另外，可以用2D Context來畫出文字：

1. fillText：繪製實心的文字
2. strokeText：只繪製文字外框
3. measureText：測量指定文字的寬度（truetype的文字寬度並不固定，需要用這個方法才知道繪製出來文字的寬度）

2D Context有內建一個全域的變換矩陣，透過操作這個變換矩陣，就可以讓繪製出來的圖形做出放大、縮小、平移、旋轉、剪變等效果。改變變換矩陣並不影響已經繪製到Canvas上的圖形，只是影響到及將會至到Canvas圖形的座標系統。這些方法包括：

1. scale：改變大小
2. rotate：旋轉。不過預設的座標系統是已Canvas的左上角為圓點，要讓一個圖形例如矩型在原地旋轉，需要先把座標平移到指定的位置
3. translate：平移，可以把原點移到指定位置
4. transform：直接輸入矩陣數值來操作，除了以上效果，還可以做出剪變等變形效果
5. transformTo：重設矩陣然後呼叫transform

除了繪圖的方法，2D Context也提供了一些快速繪圖的機制：

1. drawImage：可以用它來將其他的Canvas、Image元素、html5的Video元素繪製到Canvas中，如果是對Video操作，就等於把影片的某個影格擷取成圖片

要做進一步的圖形處理，就需要可以取得Canvas中所有Pixel來做處理，2D Context在這方面提供幾個方法，主要是透過ImageData這個物件，他的data屬性是包含所有像素的一維陣列，每四個陣列元素可以組成一個Pixel（也就是RGBA）：

1. getImageData：從Canvas取得指定範圍的Pixel
2. createImageData：產生一個空的ImageData
3. putImageData：將ImageData寫回到Canvas

有一些功能沒有提到（focus ring等，不過這跟shadow有點像），但是大部分Canvas 2D Context大概都簡單介紹到了。基本上這已經涵蓋了大部分的2D繪圖需求，可以很快就實作出一些繪圖功能，要做出類似小畫家的應用也沒問題。

明天就從塗鴉開始，實作一些簡單的繪圖應用，並且把這些功能慢慢組織起來成為有彈性的繪圖框架，讓未來要整合多人協作時會更方便。