填充：

let canvas = document.getElementById('canvas')
if (canvas.getContext) {  //判斷瀏覽器是否支援canvas
  //獲得對繪圖上下文的引用，平面圖形傳2d
  let context = canvas.getContext('2d')
  context.fillStyle = "#ff0000"
  context.fillRect(0, 0, 20, 20)  //此處畫了一個矩形，填充的顏色是#ff0000顏色
  context.fillStyle = "#0000ff"
  context.fillRect(20, 20, 20, 20)  //此處畫了一個矩形，填充的顏色是#0000ff顏色
  畫的圖的填充色是離他最近的fillStyle的顏色（即會覆蓋，若不被覆蓋則一直沿用）
}
 

描邊：

context.strokeStyle = "#ff0000"
context.strokeRect(0, 0, 20, 20)

擦除

context.clearRect(10, 10, 20, 20)  這個應該算是矩形那一塊，但是確實也涉及顏色，擦了就透明瞭，就沒有這塊了

https://www.cnblogs.com/sunli0205/p/6242684.html

let grad = context.createLinearGradient(0, 0, 300, 0)  //申明：(0, 0)到(300,0)的寬度

grad.addColorStop(0, "rgba(255,0,0,0.2)")
grad.addColorStop(0.5, "rgba(0,255,0,0.2)")
grad.addColorStop(1, "rgba(0,0,255,0.2)")

context.fillStyle = grad    //使用
context.fillRect(0, 0, 300, 100)