Hopefully the solution to what I would like to do is easy. I successfully have the canvas printing to a pdf using the following code:

<!-- Start PDF Script -->
  <script type="text/javascript">
        function getPDFFileButton () {
            return html2canvas($('canvas'), {
                background: "#ffffff",
                onrendered: function(canvas) {
                    var myImage = canvas.toDataURL("image/png,1.0");
                    // Adjust width and height
                    var imgWidth = (canvas.width * 20) / 240;
                    var imgHeight = (canvas.height * 20) / 240; 
                    // jspdf changes
                    var pdf = new jsPDF('p', 'mm', 'a4');
                    pdf.addImage(myImage, 'png', 15, 2, imgWidth, imgHeight); // 2: 19
                    pdf.save('H&H-Carport-Design.pdf');
                }
            });
        }       
        $("#btnPrint").on("click", function () {
            getPDFFileButton ()
        });
    </script>
<!-- End PDF Script -->

<button type="button" class="btn btn-lg btn-secondary" id="btnPrint">Print PDF <i class="fas align-middle fa-file-pdf"></i></button>

I need help modifying the code to take a picture of the canvas from the Front, Back, Left and Right and put all of the images on the same PDF when you click the "Print PDF" button. Is this possible?