如何判断画在canvas中的图片已经加载完毕？

Question

场景是这样的：用canvas生成一张海报。点击按钮时开始画海报，海报中包含一个背景图，并弹出一个弹窗，将画好的canvas转换成图片并显示在弹窗里。
目前的问题是：点击第一次时弹窗里用canvas生成的图片中没有那张背景图，非要退出弹窗并点击第二次才有。之后再点会重复以上循环。我的猜想是第一次的时候canvas中背景图还没有加载完毕弹窗就弹出了？但是为什么第三次又没了。。
使用的是vue.js，关键代码如下:

点击按钮时执行的部分关键代码：

  var c = document.createElement('canvas')
  c.width = 750
  c.height = 1334
  var context = c.getContext('2d')
  var image = new Image()
  image.src = '/img/background.png'
  image.onload = context.drawImage(image, 0, 0, 750, 1334)
  
  this.imgurl = c.toDataURL('image/png')
  image.onload = this.show = true // 打开弹窗
  

弹窗html，使用的是vant框架:

    <van-popup v-model="show" position="top" @close="onClose()">
      <div class="bg" id="bg">
        <div class="close" @click="show = false">关闭</div>
        <img :src="imgurl" alt="">
        <van-button size="large" id="save" type="primary">长按图片保存到手机相册</van-button>
      </div>
    </van-popup>

第一次点击时效果:

关闭弹窗后第二次点击时效果：

Answer 1

感谢xianshenglu的回答
var image = new Image()
image.src = '/img/background.png'
image.onload = ()=>{
var c = document.createElement('canvas')
c.width = 750
c.height = 1334
var context = c.getContext('2d')
context.drawImage(image, 0, 0, 750, 1334)
this.imgurl = c.toDataURL('image/png')
this.show = true // 打开弹窗
}