Append n images of an object to one canvas

Question

I would like to combine taken pictures of a multi-page document to at least one dataURL, because I need one string of the image Data to send it to an OCR-API.

Therefore I use a canvas based on this example:

Merge two dataURIs to create a single image

But my canvas in the html only shows a small part of one image and also the image Data from the DataURL giving me only this small part.

HTML

<div width=100 height=100 id="canvas" #ocrCanvas>

Sources

var base64Canvas = [
   { src: 'data:image/png;base64,... },
   { src: 'data:image/png;base64,... },
   ...
];

Add canvas

    addCanvas() {

      var base64ImagesArray = this.base64Canvas;
      var canvas = document.createElement('canvas');
      var destination = this.ocrCanvas.nativeElement;

      Promise.all(base64ImagesArray.map(imageObj => add2canvas(canvas, imageObj)))
          .then(
            (imageObj) => {
                   destination.appendChild(canvas);
                   var canvasURL = canvas.toDataURL();
                   this.sendDataGoogleOCR(canvasURL)
                 }
          );

      function add2canvas(canvas, imageObj) {
        //console.log(imageObj);
         return new Promise( (resolve, reject) => {
            if (!imageObj || typeof imageObj != 'object') return reject();
            var img = new Image();
            img.onload = function () {
                canvas.getContext('2d')
                      .drawImage(this, imageObj.x || 0, imageObj.y || 0);
                resolve();
            };
            img.src = imageObj.src;
         });
      }
  }