小程序用canvas合并两张图片

<canvas canvas-id="share" style="width:100%;height:{{screenH + 'px'}}"></canvas> 

    // 合成图片
    // 如果缓存中有底图和边框  
    if (wx.getStorageSync('imgSrc') != '' && wx.getStorageSync('borderUrl') != '') {
      wx.getSystemInfo({
        // 调用此api可以拿到当前屏幕的宽和高    
        success: (res) => {
          that.setData({
            screenW: res.screenWidth,
            screenH: parseFloat(res.screenWidth / 1.63)
          })
        },
      })​
      const ctx = wx.createCanvasContext('share')
      wx.getImageInfo({ //获取底图信息    
        src: (that.data.baseUrl + wx.getStorageSync('imgSrc')),
        success: res => {
          let imgPath = res.path
          // 绘制底图ctx.drawImage(imgPath, 0, 0, that.data.screenW, parseFloat(that.data.screenW / 1.63))     
          wx.getImageInfo({ //边框信息      
            src: wx.getStorageSync('borderUrl'),
            success: result => {
              // 绘制边框ctx.drawImage(result.path, 0, 0, that.data.screenW, 
              parseFloat(that.data.screenW / 1.63)
              ctx.draw()
              setTimeout(() => {
                // 生成临时图片      
                wx.canvasToTempFilePath({
                  canvasId: 'share',
                  success: response => {
                    uploadFile(response.tempFilePath).then(result1 => {
                      if (JSON.parse(result1.data).code == 200) {
                        wx.setStorageSync('newImgSrc', JSON.parse(result1.data).data.path)
                        that.setData({
                          // 拿到合成好的图片重新赋给src             
                          src: JSON.parse(result1.data).data.path
                        })
                      }
                    })
                  }
                })
              }, 500);
            }
          })
        }
      })
    }

我的实现效果：