So far I have tried many different variations of this code

function printCanvas(canvasId,title){
var canvas = document.getElementById(canvasId); 
var imgData = canvas.toDataURL('image/png');
//var imgWidth = 210; 
// var masterWidth = canvas.width;
// var imgWidth = 210;
// var pageHeight = 295;  
// var imgHeight = canvas.height * imgWidth / canvas.width;
// var masterHeight = canvas.height * imgWidth / canvas.width;
// var heightLeft = imgHeight;
// var doc = new jsPDF('p', 'pt');
// pageWidth = 595;
// pageHeight = 852;
var doc = new jsPDF("p", "mm", [317.5,396.875]);
var pageWidth = 317.5;
var pageHeight = 396.875;
var position = 0;

// doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
// heightLeft -= pageHeight;

// while (heightLeft >= 0) {
//   position = heightLeft - imgHeight;
//   doc.addPage();
//   doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
//   heightLeft -= pageHeight;
// }
addP = 0;
for (var y=0;y<Math.ceil(canvas.height/pageHeight);y++){
    for (var x=0;x<Math.ceil(canvas.width/pageWidth);x++){
        if (addP == 1){
            doc.addPage();
        }
        doc.addImage(imgData,'PNG',x*pageWidth,y*pageHeight,pageWidth,pageHeight)
        addP = 1;
    }
}
doc.save( 'pattern.pdf');
}

and nothing seems to work so far I want it so that each page of the pdf shows an image of 1200 pixels width by 1500pixels height but not fit to page so that it stays with right squared pixels ratios (not stretched). and it would go across per crop until right edge of image is reached and then it loops downward until the whole image is shown (or can be assembled when the pdf is printed).