Estoy trabajando en una extensión de navegador (Chrome/Edge) que inyecta un lienzo en cualquier página y me permite dibujar un rectángulo.
El elemento Canvas DEBERÍA extender el scrollHeight completo de cualquier página dada, y CASI lo hace. Simplemente parece detenerse justo antes del pie de página (como en la imagen)
¿Cómo puedo arreglar esto para que el lienzo sea VERDADERAMENTE PÁGINA COMPLETA?
CSS relevante (a través de JavaScript) y JavaScript a continuación
{ 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? }
Creo que agregar una unidad de píxeles usando un literal de cadena puede ayudar.
{ mainCanvas.style.width = `${document.body.scrollWidth}px`; mainCanvas.style.height = `${document.body.scrollHeight}px`; }