mesureText（）返回大数字

Question

在我的应用中，用户可以从输入栏动态添加文本或图像。文本位于span元素内。添加完所有图像和文本后，用户可以单击按钮将其添加到画布。在向画布添加文本时，我使用measureText（）来获取文本宽度，以便我可以很好地将它放在图像旁边。

但是当我使用它时，无论文本有多大（303像素），它都会返回一个总是相同的巨大数字。可能导致这种情况的原因是什么？

if (divEl){
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.imageSmoothingEnabled = false;
            for(var n=0; n<imgDiv.children.length; n++){
                if (imgDiv.children[n].nodeName === "IMG"){
                    ctx.drawImage(imgDiv.children[n], prevX ,0)
                    prevX += imgDiv.children[n].width
                    console.log(imgDiv.children[n].width)
                }
                else if(imgDiv.children[n].nodeName === "SPAN"){
                    ctx.font = window.getComputedStyle(spanEl[0]).fontSize + " Open Sans"
                    ctx.fillText(imgDiv.children[n].innerHTML,prevX ,parseInt(window.getComputedStyle(spanEl[0]).fontSize,10))
                    prevX += ctx.measureText(imgDiv.children[n]).width
                }
            }
            var imagedata = ctx.getImageData(0,0,canvas.width,canvas.height)
            canvas.width = prevX
            ctx.putImageData(imagedata,0,0)
        }
        console.log(canvas.width)
        console.log(canvas.height)
        console.log(imagedata)