I'm working on a browser extension (Chrome / Edge) that injects a Canvas onto any given page, and allows me to draw a rectangle.

The Canvas element SHOULD extend the full scrollHeight of any given page, and it ALMOST does. It just seems to stop just before the footer (as in pic)

How can I fix this so that the Canvas is TRULY FULL PAGE?

Relevant CSS (via JavaScript) and JavaScript below

{
    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?
}