console.clear()

const canvas = document.createElement('canvas')

const ctx = canvas.getContext('2d')

canvas.width = 150

canvas.height = 150

ctx.fillRect(0, 0, 150, 150)

​

// 移動畫布中心

ctx.translate(75, 75)

ctx.beginPath()

ctx.arc(0, 0, 60, 0, Math.PI*2, true)

ctx.clip()

​

// 畫布中心歸位

ctx.translate(-75, -75)

​

// 繪製一個與畫布一樣大的圖，並填滿

ctx.fillStyle = 'rgba(0, 0, 255, .5)'

ctx.fillRect(0, 0, 150, 150)

​

document.body.appendChild(canvas)