Failed to execute 'drawImage' on 'CanvasRenderingContext2D'

[GilHogan]

I want to merge two canvases into one image, but I receive an exception.

constructor(props) {
    this.qRCodeCanvasRef1 = React.createRef();
    this.backgroundCanvasRef1 = React.createRef();
  }

render() {
    ......
    <Canvas ref={this.backgroundCanvasRef1} />
    <Canvas ref={this.qRCodeCanvasRef1} />
    ......
}

componentDidMount() {
    let backgroundCanvas = this.backgroundCanvasRef1.current;
    let qRCodeCanvas = this.qRCodeCanvasRef1.current;

    const backgroundImg = new CanvasImage(backgroundCanvas);
    backgroundImg.src = backgroundUrl;
    backgroundImg.crossOrigin = 'anonymous';

    backgroundImg.addEventListener('load', () => {
      const context = backgroundCanvas.getContext("2d");
      backgroundCanvas.width = backgroundImg.width;
      backgroundCanvas.height = backgroundImg.height;
      context.drawImage(backgroundImg, 0, 0, backgroundImg.width, backgroundImg.height);

      const qRCodeImg = new CanvasImage(qRCodeCanvas);
      qRCodeImg.src = qQCodeUrl;
      qRCodeImg.crossOrigin = 'anonymous';

      qRCodeImg.addEventListener('load', () => {
        // ERROR
        context.drawImage(qRCodeImg, 0, 0, 100, 100);
      });
    });
}