I am trying to write to an A4 PDF

form = document.querySelector("#theform");

    html2canvas(form).then(function(canvas) {   
          doc = new jsPDF({   
            unit: 'pt',  
            format: 'a4',  
            });
            
            for (var i = 0; i <= form.clientHeight/842; i++) {
            //! This is all just html2canvas stuff
                var srcImg  = canvas;
                var sX      = 0;
                var sY      = 842*i; 
                var sWidth  = 595;
                var sHeight = 842;
                var dX      = 0;
                var dY      = 0;
                var dWidth  = 595;
                var dHeight = 842;

                window.onePageCanvas = document.createElement("canvas");
                onePageCanvas.setAttribute('width', 595);
                onePageCanvas.setAttribute('height', 842);
                var ctx = onePageCanvas.getContext('2d');
                
                ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight);

                var canvasDataURL = onePageCanvas.toDataURL("image/png",  wid = canvas.width, hgt = canvas.height);
                var hratio = hgt/wid
                
                const pdfWidth = doc.internal.pageSize.width;
                const TheHeight = doc.internal.pageSize.width;                  
                const pdfHeight = TheHeight
                
            
                if (i > 0) {
                     doc.addPage(595, 842); 
                }
                //! now we declare that we're working on that page
                doc.setPage(i+1);
                
                
                doc.addImage(canvasDataURL, 'PNG', 10, 10, pdfWidth, pdfHeight);

            }
            doc.autoPrint();
            
            window.open(doc.output('bloburl'), '_blank'); 
          }

But the it is only creating a PDF for part of the left hand side and I can't see anything wrong.. It is as though what it is writing to the PDF is twice the size it should be.