scenario goes like this: generate a poster with canvas. Click the button to start drawing the poster, which contains a background image , and a pop-up window that converts the painted canvas into a picture and displays it in the pop-up window.
the current problem is that the background image is not in the picture generated by canvas in the pop-up window the first time. You have to exit the pop-up window and click the second time. After that, the above cycle will be repeated. My guess is that for the first time, the background image in canvas popped up before it was loaded. But why is it gone for the third time? no, no, no.
uses the vue.js, key code as follows:

part of the key code to be executed when the button is clicked:

  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 // 
  

Pop-up html, uses the vant framework:

    <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>

effect on first click:

: