首先來詳細介紹矩形的繪制吧，矩形有三個函數可以繪制的：
fillRect(x,y,width,height) : Draws a filled rectangle
strokeRect(x,y,width,height) : Draws a rectangular outline
clearRect(x,y,width,height) : Clears the specified area and makes it fully transparent
上面的函數都接受四個參數，X和Y用於指定矩形左上角也就是相對於原點的位置，width和height用於指定矩形的寬和高。這對於有基礎的同學，還是非常簡單的。
繪制路徑 Drawing paths
繪制路徑不像繪制矩形那要，需要一些額外的步驟，下面是需要使用的函數和步驟：
beginPath()
closePath()
stroke()
fill()
第一步：用 beginPath 創建路徑。在在內存中，徑路是以一組子路徑（直線，弧線等）的形式儲存的，它們共同構成一個圖形。每次調用 beginPath，子路徑組都會被重置，然後可以繪制新的圖形。
第二步：是實際繪制路徑的部分，很快我們就會看到。
第三步：調用 closePath 方法，它會嘗試用直線連接當前端點與起始端點來關閉路徑，但如果圖形已經關閉或者只有一個點，它會什麼都不做。這一步不是必須的。
第四部：也就是最後一步，調用 stroke或 fill 方法，這時，圖形才是實際的繪制到 canvas上去。stroke是繪制圖形的邊框，fill會用填充出一個實心圖形。當調用 fill 時，開放的路徑會自動閉合，而無須調用 closePath ，這需要大家注意。
畫一個簡單圖形（如三角形）的代碼如下。
ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill();
moveTo 是一個十分有用的方法，它是繪制路徑的實用方法的一部分。你可以把它想象成是把筆提起，並從一個點移動到另一個點的過程。
moveTo(x, y)
它接受 x 和 y （新的坐標位置）作為參數。