微信小程序毕设遇到的坑2：canvas绘制图片，以及在绘制的图片上添加矩形遮挡物

var that = this
const query = wx.createSelectorQuery()
query.select('#myCanvas')
     .fields({ node: true, size: true })
     .exec((res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')
        that.setData({
        // 注意在data中定义ctx变量
        	ctx: ctx
        })
        const img = canvas.createImage()
        // 此处事先在data中定义了图片链接
        img.src = this.data.imageUrl
        img.onload=()=>{
            ctx.drawImage(img, 0, 0,275,182)
            //关键：把要填充的矩形代码放在此处，即可实现覆盖图片的效果
            ctx.rect(10, 10, 10, 10) 
            ctx.fillStyle = 'red'
            ctx.fill()
          }
    })
}

此代码仅仅记录了如何在微信小程序用canvas绘制了一张图片后，再在图片上绘制矩形。
效果如下：

（效果是用调用百度ocr api后获取了身份证各个内容的位置后加的遮挡物，如果有小伙伴感兴趣，下次可以分享整个小项目的源码哦）

注：如果红框里的代码放在img.οnlοad=()=>{}后则绘制的正方形都在绘制的图片后面，我也不清楚是什么原因。