Currently developing a browser extension for Chrome and Edge that adds a Canvas to any webpage, allowing me to draw rectangles.
The Canvas should ideally stretch the entire scrollHeight of the page, but unfortunately falls short just before reaching the footer (see image).
https://i.sstatic.net/Kt1NC.png
Any suggestions on how I can ensure the Canvas truly covers the entire page?
Here is the relevant CSS (via JavaScript) and JavaScript code:
{
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; // Should cover the full page?
}