Merge Image Functions Results in Incorrect Result in Hybrid Application on iOS - Works in Safari

I have this function:

   //Merge images
   mergeImages(sig, bg, outputFormat)
   {

   return new Promise((resolve, reject) => {
     var canvas = <HTMLCanvasElement> document.createElement("canvas");

     var img1 = new Image();
     var img2 = new Image();

     var finalURL = '';

     var canvas = <HTMLCanvasElement> document.createElement('canvas');

     document.getElementById("canvasContainer").appendChild(canvas);

     var context = canvas.getContext('2d');

     img1.src = '';
     img2.src = '';

     img1.addEventListener('load',function() {
          console.log("loaded img1");

          canvas.width = 100;
          canvas.height = 100;
      });

      img2.addEventListener('load',function() {
           console.log("loaded img2");

          context.drawImage(img1, 0, 0, 100, 100);
          context.drawImage(img2, 0, 0, 100, 100);

          finalURL = canvas.toDataURL(outputFormat);

          resolve (finalURL);

          console.log("\n finalURL" + finalURL +"\n");
       });


     setTimeout(function() {
        console.log(img1.complete);
      }, 1000);

      setTimeout(function() {
         console.log(img2.complete);
       }, 1000);

     img1.src = bg;

     img2.src = sig;

  });

}

This function returns a base64 dataURL of the resulting image from combining 'img1' and 'img2'. The application is built with Ionic (HTML/Typescript).

In the Safari browser, after triggering this function (called via DOM button presses), I always see the correct combined image.

However, when I build this application for iOS (iPad), the result is incorrect, and I have no idea why. No errors are being explicitly thrown.

Any help would be appreciated.