圖形是由最基本的點線面畫出來
再加上 填滿色塊 fill 和描邊 stroke 兩種上色產生

線 描邊產生的和由多個點連線產生下方的圖

矩形描邊有2種方法
產生的圖形都是一樣的

// 矩形直接上色描邊
ctx.strokeRect(30,30,30,30); // 描邊

// 或是先建立範圍再描邊
ctx.rect(30, 70, 30, 30); 
ctx.stroke();

strokeRect(x, y, width, height)、rect(x, y, width, height)
x, y 是矩型左上起點
width, height 是矩型寬高

多個點連線
舉三角形為例

ctx.moveTo(90,30); // 建立起點
ctx.lineTo(105,60); // 拉線到這個點
ctx.lineTo(75,60);
ctx.closePath(); // 把最後的點和起點封閉
ctx.stroke();

closePath() 封閉連線
或是把最後一個點 = 起點(x, y)
lineTo(90,30)都是一樣
目的都在作像左邊的三角形描邊

右邊的就是沒有 closePath() 和 lineTo(90,30) 作出來的線

圓形

ctx.beginPath(); // 重置路徑
ctx.arc(130, 45, 15, 0, 2*Math.PI);
ctx.stroke();

arc(x, y, r, sAngle, eAngle, counterclockwise);
x, y 圓的中心點
sAngle, eAngle 起點角度、結束角度
起點角度 = 0
為圓的最右邊和中心呈水平的點
順時針增加角度 單位是 pi
1 pi = 180度

什麼是 pi ?
維基百科這麼說的
圓周率是一個數學常數，為一個圓的周長和其直徑的比率，約等於3.141592653589793，它在18世紀中期之後一般用希臘字母π指代，有時也拼寫為「pi」。

counterclockwise 是轉的方向
False = 順時針轉(預設可省略)
true = 逆時針轉

需要用 beginPath 重置起點
避免和前一個點 "連線"

或是把起點移到圓的起點 ctx.moveTo(145, 45) 也可以

只是要找到 x, y 比較麻煩