Javascript 将样式从firebase firestore加载到画布时出错

我试图从firestore数据库中获取数据，并使用该数据创建画布。我的目标是加载一组图像和地图以返回几个画布。 我经常遇到这样的错误：

Uncaught（in promise）TypeError:无法读取null的属性“getContext”

我曾尝试使用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);
}

var gImgObj；
var gMeme=[]；
var-gCtx；
var帆布；
函数memeDivGet（theId）{
setTimeout（函数（）{
db.collection（“memeInfo”）。其中（“creator”、“==”、theId）
.get（）
.then（函数（querySnapshot）{
querySnapshot.forEach（函数（doc）{
db.collection（“memeInfo”）.doc（doc.id）.collection（“MIMG”）
.get（）
.then（函数（querySnapshot）{
querySnapshot.forEach（函数（doc）{
//警报（doc.data（））
//警报（“此处”）
console.log（doc.data（）.Coordinates[0].fontSize）
gMeme.push（doc.data（）.BaseIMG）
对于（变量i=0；i1）{
drawTxt（gMeme[i]）；
}
}
对于（变量i=0；i

我想要返回的是一组带有我想要的参数的画布

我的数据库是以这种方式为代码的这一部分设置的：

（fooIds表示firebase设置的随机id）

• “MemeInfo”收藏
  • 文件（fooIds）
    • “MIMG”子集合
      • 文件“A”

在每个fooId文档中，都有一个creatorId，它可以帮助计算机找到是谁创建了这个meme，我使用它来定位我应该用于这个特定创建者帐户的文档

“gMeme”是一个包含数据库信息的数组

“文档”有一个BaseIMG（背景图像）、一个包含贴图的坐标数组（包含大小、颜色、fontFamily和其他参数）和一个包含字符串的文本数组。有一个“文件”的图像附加

---

我理解这很混乱，因此如果您有任何问题，请在评论部分询问。

是否将

canvas

id设置为

canvasImage

？

canvasImage

是来自HTML的id，和设置为画布。

canvas

id设置为

canvasImage

，

canvasImage

是HTML中的id，并设置为画布。的可能重复项