即使设置为scrollHeight，画布元素也不会扩展整页？

Question

我正在开发一个浏览器扩展程序（Chrome / Edge），它将画布注入任何给定页面，并允许我绘制一个矩形。

Canvas 元素应该扩展任何给定页面的完整 scrollHeight，而且几乎可以做到。它似乎只是在页脚之前停止（如图所示）

我怎样才能解决这个问题，使画布是真正的整页？

相关的 CSS（通过 JavaScript）和下面的 JavaScript

{
    document.width = '100%';
    document.height = '100%';
    document.body.style.padding = 0;
    document.body.style.margin = 0;
    document.body.width = '100%';
    document.body.height = '100%';
    document.body.style.cursor = "crosshair";

    mainCanvas.style.position = 'absolute';
    mainCanvas.style.top = 0;
    mainCanvas.style.left = 0;
    mainCanvas.width = document.body.scrollWidth;
    mainCanvas.height = document.body.scrollHeight;  // This should be fullpage?
}

Answer 1

我认为通过使用字符串文字添加像素单元可能会有所帮助。

{
    mainCanvas.style.width = `${document.body.scrollWidth}px`;
    mainCanvas.style.height = `${document.body.scrollHeight}px`;
}