Ошибка загрузки стилей из Firebase Firestore на холст

Question

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

Uncaught (in promise) TypeError: Cannot read property 'getContext' of null

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

var gImgObj;
var gMeme = [];
var gCtx;
var canvas;
function memeDivGet(theId){
      setTimeout(function(){
   db.collection("memeInfo").where("creator", "==", theId)
    .get()
    .then(function(querySnapshot) {
        querySnapshot.forEach(function(doc) {
             db.collection("memeInfo").doc(doc.id).collection("MIMG")
            .get()
            .then(function(querySnapshot) {
                querySnapshot.forEach(function(doc) {
                  //alert(doc.data())
                  // alert("here")
                  console.log(doc.data().Coordinates[0].fontSize)
                  gMeme.push(doc.data().BaseIMG)
                  for (var i = 0; i < doc.data().Coordinates.length; i++) {
                    // alert("here" + i)
                    gMeme.push({
                      line: "line",
                      size: doc.data().Coordinates[i].fontSize,
                      align: doc.data().Coordinates[i].align,
                      color: doc.data().Coordinates[i].color, // in color picker, if choosing color from platte notice it stays "solid".
                      fontFamily: doc.data().Coordinates[i].fontStyle,
                      lineWidth: 2, // outline width
                      x: doc.data().Coordinates[i].xPos,
                      y: doc.data().Coordinates[i].yPos,
                      text: doc.data().Text[i]        
                    })
                  }
                  //console.log(doc.data().BaseIMG)
                  initCanvas(doc.data().BaseIMG);
                })
            })
        })
    })
  },1500) 
}
function initCanvas(link) {
  var canvas = document.querySelector('#canvasImage');
  gCtx = canvas.getContext('2d');
  gImgObj = new Image();
   // console.log(link)
    //alert(gMeme[0])
      gImgObj.src = link;
      gImgObj.onload = function () {
          canvas.width = gImgObj.width;
          canvas.height = gImgObj.height;
          drawCanvas();
      };
  //console.log("HERE4")
}

function drawCanvas() {
  //alert(gMeme)
    gCtx.drawImage(gImgObj, 0, 0);
    for (var i = 0; i < gMeme.length; i++) {
      if(i > 1){
         drawTxt(gMeme[i]);
      }
    }
    for (var i = 0; i < gMeme.length - 1; i++) {
      drawTxt(gMeme[i + 1]);
    }
    // gMeme.txts.forEach(function (txt) {
    //     drawTxt(txt);
    // });

}

function drawTxt(txt) {
    gCtx.font = txt.size + 'px' + ' ' + txt.fontFamily;
    gCtx.textAlign = txt.align;
    gCtx.fillStyle = txt.color;
    gCtx.fillText(txt.text, txt.x, txt.y);
}

То, что я хочу вернуть, - это набор полотен с нужными мне параметрами.

Моя база данных настроена таким образом для этого раздела кода:

(fooIds означает случайный идентификатор, установленный firebase)

• Коллекция 'MemeInfo'
  • Документ (fooIds)
    • Подколлекция 'MIMG'
      • Документ 'A'

Внутри каждого документа fooId есть идентификатор creator, который помогает компьютеру найти, кто создал этот мем, Я использую это, чтобы найти документ, который я должен использовать для учетной записи этого конкретного создателя.

"gMeme" - это массив, содержащий информацию из базы данных.

"Документ" имеетBaseIMG (фоновое изображение), массив координат с картами внутри (содержащий размер, цвет, fontFamily и другие параметры) и текстовый массив со строками внутри.Прилагается изображение «Документа».

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