uniapp canvas 无法绘制多个矩形

<canvas :canvas-id="`share_content_${index}`" :style="{width:doms[index].width+'px',height:doms[index].height+'px'}"></canvas>  
          export function drawSquarePic(ctx, x, y, w, h, r, url) {  
  ctx.save()  
  ctx.beginPath()  
  // 绘制左上角圆弧  
  ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)  
  // 绘制border-top  
  // 画一条线 x终点、y终点  
  ctx.lineTo(x + w - r, y)  
  // 绘制右上角圆弧  
  ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)  
  // 绘制border-right  
  ctx.lineTo(x + w, y + h - r)  
  // 绘制右下角圆弧  
  ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)  
  // 绘制左下角圆弧  
  ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)  
  // 绘制border-left  
  ctx.lineTo(x, y + r)  
  // 填充颜色(需要可以自行修改)  
  ctx.setFillStyle('#ffffff')  
  ctx.fill()  
  // 剪切，剪切之后的绘画绘制剪切区域内进行，需要save与restore 这个很重要 不然没办法保存  
  ctx.clip()  

  // 绘制图片  
  return new Promise((resolve, reject) => {  
    if (url) {  
      uni.getImageInfo({  
        src: url,  
        success(res) {  
          ctx.drawImage(res.path, x, y, w, h)  
          ctx.restore() //恢复之前被切割的canvas，否则切割之外的就没办法用  
          ctx.draw(true)  
          resolve()  
        },  
        fail(res) {  
          console.log('fail -> res', res)  
          uni.showToast({  
            title: '图片下载异常',  
            duration: 2000,  
            icon: 'none'  
          })  
        }  
      })  
    } else {  
      ctx.draw(true)  
      resolve()  
    }  
  })  
}  
const ctx = uni.createCanvasContext(id,this);  
      ctx.clearRect(0, 0, 265, 471) //清空之前的海报  
      // ctx.draw() //清空之前的海报  
      let data = el  
      let system = {  
        w:265,  
        h:471,  
        scale:1,  
        p:18  
      }  
      let poster  = {  
        url: data.picUrl,  
        r: 10 * system.scale,  
        w: 265 * system.scale,  
        h: 471 * system.scale,  
        x: (system.w - 265 * system.scale) / 2,  
        y: (system.h - 471 * system.scale) / 2,  
      }  
      let qrBg = {  
        r: 10 * system.scale,  
        w: system.w - 36 * system.scale,  
        h: 70 * system.scale,  
        x: (20 * system.scale),  
        y: (system.h - 90 * system.scale),  
      }  
      let qrcode = {  
        url:this.qrcodeImage,  
        r: 0,  
        w: 50 * system.scale,  
        h: 50 * system.scale,  
        x: (28 * system.scale),  
        y: (393 * system.scale),  
      }  
      let qrTitle = {  
        text:this.course.shareTip,  
        r: 0,  
        w: 70 * system.scale,  
        f: 10,  
        x: (88 * system.scale),  
        y: (403 * system.scale),  
        bg:'#333',  
        lh:16  
      }  
      let qrTitle1 = {  
        text:this.course.shareWatch,  
        r: 0,  
        w: 70 * system.scale,  
        f: 14,  
        x: (88 * system.scale),  
        y: (423 * system.scale),  
        bg:'#333',  
        lh:20,  
        weight:'bold'  
      }  
      let qrTitle2 = {  
        text:`${this.course.come}「${this.shopData.shopName}」`,  
        r: 0,  
        w: 140 * system.scale,  
        f: 10,  
        x: (88 * system.scale),  
        y: (440 * system.scale),  
        bg:'#BECADB',  
        lh:16,  
      }  
      let courseBg = {  
        r: 10 * system.scale,  
        w: system.w - 36 * system.scale,  
        h: 208 * system.scale,  
        x: (20 * system.scale),  
        y: (165 * system.scale),  
      }  
      let course = {  
        url:this.info.courseCover,  
        r: 10 * system.scale,  
        w: system.w - 56 * system.scale,  
        h: 118 * system.scale,  
        x: (30 * system.scale),  
        y: (180 * system.scale),  
      }  
      let courseTitle = {  
        text:this.info.courseName,  
        r: 0,  
        w: 140 * system.scale,  
        f: 14,  
        x: (30 * system.scale),  
        y: (318 * system.scale),  
        bg:'#333',  
        lh:20,  
        weight:'bold'  
      }  
      let coursePrice = {  
        text:'￥ '+this.info.price,  
        r: 0,  
        w: 140 * system.scale,  
        f: 16,  
        x: (30 * system.scale),  
        y: (358 * system.scale),  
        bg:'#FF0000',  
        lh:20,  
        weight:'bold'  
      }  
      let userLogo = {  
        url: this.userInfo.headImg,  
        r: 13 * system.scale,  
        w: 26 * system.scale,  
        h: 26 * system.scale,  
        x: (20 * system.scale) / 2,  
        y: (20 * system.scale) / 2,  
      }  
      let userLogoBg = {  
        r: 13 * system.scale,  
        w: 28 * system.scale,  
        h: 28 * system.scale,  
        x: (18 * system.scale) / 2,  
        y: (18 * system.scale) / 2,  
      }  
      await drawSquarePic(ctx, poster.x, poster.y, poster.w, poster.h, poster.r, poster.url)  
      await drawSquarePic(ctx, qrBg.x, qrBg.y, qrBg.w, qrBg.h, qrBg.r,'')  
      await drawSquarePic(ctx, qrcode.x, qrcode.y, qrcode.w, qrcode.h, qrcode.r, qrcode.url)  
      await drawTextReturnH(ctx,qrTitle.text,qrTitle.x,qrTitle.y,qrTitle.w,qrTitle.f,qrTitle.bg,qrTitle.lh)  
      await drawTextReturnH(ctx,qrTitle1.text,qrTitle1.x,qrTitle1.y,qrTitle1.w,qrTitle1.f,qrTitle1.bg,qrTitle1.lh,qrTitle1.weight)  
      await drawTextReturnH(ctx,qrTitle2.text,qrTitle2.x,qrTitle2.y,qrTitle2.w,qrTitle2.f,qrTitle2.bg,qrTitle2.lh)// 只能绘制到这里  
      await drawSquarePic(ctx, courseBg.x, courseBg.y, courseBg.w, courseBg.h, courseBg.r, '')  
      await drawSquarePic(ctx, course.x, course.y, course.w, course.h, course.r, course.url)  
      await drawTextReturnH(ctx,courseTitle.text,courseTitle.x,courseTitle.y,courseTitle.w,courseTitle.f,courseTitle.bg,courseTitle.lh,courseTitle.weight)  
      await drawTextReturnH(ctx,coursePrice.text,coursePrice.x,coursePrice.y,coursePrice.w,coursePrice.f,coursePrice.bg,coursePrice.lh,coursePrice.weight)  
      await drawSquarePic(ctx, userLogoBg.x, userLogoBg.y, userLogoBg.w, userLogoBg.h, userLogoBg.r,'')  
      await drawSquarePic(ctx, userLogo.x, userLogo.y, userLogo.w, userLogo.h, userLogo.r, userLogo.url)  
      await drawTextReturnH(ctx,this.userInfo.nickname,50,20,200,14,'#FFF',20)