Изменение размера холста динамически генерирует пустой холст

Question

Я пытаюсь динамически настроить размер моего холста в зависимости от количества изображений, которые будут нарисованы.

Только для одного изображения это работает отлично. Если у меня есть более одного изображения, холст будет пустым.

this.imageWidth дает мне ширину 1-го изображения), а this.heightCanvas дает мне общую высоту всех изображений.

Потому что я хочу разместить все изображения в вертикальном ряду.

HTML

<div id="canvasWrapper"></div>

JS

  startCanvas() {
  var canvasExists = document.getElementById('ocrCanvas');

  if (canvasExists != null) {
    alert(canvasExists);
    var myNode = document.getElementById("canvasWrapper");
    while (myNode.firstChild) {
        myNode.removeChild(myNode.firstChild);
    }
  }
  var canv = document.createElement('canvas');
  canv.id = 'ocrCanvas';
  document.getElementById('canvasWrapper').appendChild(canv); // adds the canvas to #someBox

  const getContext = () => document.getElementById('ocrCanvas').getContext('2d');
  const ctx = getContext();
  ctx.canvas.width  = this.imageWidth;
  ctx.canvas.height = this.heightCanvas;

  console.log('ctx width' + ctx.canvas.width)
  console.log('ctx height' + ctx.canvas.height)

  this.fillCanvas();

}

fillCanvas() {
const getContext = () => document.getElementById('ocrCanvas').getContext('2d');

const loadImage = url => {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = () => reject(new Error(`load ${url} fail`));
    img.src = url;
  });
};

const depict = options => {
  const ctx = getContext();
  ctx.canvas.width  = this.imageWidth;
  ctx.canvas.height = this.heightCanvas;

  console.log('ctx width' + ctx.canvas.width)
  console.log('ctx height' + ctx.canvas.height)

  const myOptions = Object.assign({}, options);
  return loadImage(myOptions.src).then(img => {

    ctx.drawImage(img, myOptions.x, myOptions.y);
  });
};

const imgs = this.base64Canvas;
imgs.forEach(depict);
};