js图片滑动验证码 我想把两块拼图那里加上阴影效果，显得更有层次感，应该怎么改

Question

 function draw(ctx, operation, x, y) {
    ctx.beginPath()
    ctx.moveTo(x, y)
    ctx.lineTo(x + l / 2, y)
    ctx.arc(x + l / 2, y - r + 2, r, 0, 2 * PI)
    ctx.lineTo(x + l / 2, y)
    ctx.lineTo(x + l, y)
    ctx.lineTo(x + l, y + l / 2)
    ctx.arc(x + l + r - 2, y + l / 2, r, 0, 2 * PI)
    ctx.lineTo(x + l, y + l / 2)
    ctx.lineTo(x + l, y + l)
    ctx.lineTo(x, y + l)
    ctx.lineTo(x, y)
    ctx.fillStyle = '#fff'
    ctx[operation]()
    ctx.beginPath()
    ctx.arc(x, y + l / 2, r, 1.5 * PI, 0.5 * PI)
    ctx.globalCompositeOperation = "xor"
    ctx.fill()
  }

draw() {
  // 随机创建滑块的位置
  this.x = getRandomNumberByRange(L + 10, w - (L + 10))
  this.y = getRandomNumberByRange(10 + r * 2, h - (L + 10))
  draw(this.canvasCtx, 'fill', this.x, this.y)
  draw(this.blockCtx, 'clip', this.x, this.y)
  console.log(this.blockCtx);
}

效果图是这样的

求大神指教怎么给两块拼图那里加上阴影的效果，类似box-shadow: 0px 0px 10px #333 inset;的那种

详细代码请见：https://blog.csdn.net/qq_39327418/article/details/83654839

Answer 1

https://blog.csdn.net/weixin_34354945/article/details/86871410