Html2Canvas then Canvas2Image cutting the generated image

Question

I'm trying to generate a PDF from a Html calendar on my web app, but when I convert the html into a cavas and than convert it to and image I got the image cutted, missing the last part of the calendar.

The cropping of the image depends on the screen size, if I try to generate it on a bigger screen it looks like this:

My code looks like this:

var html2Obj = html2canvas($('#calendar'));
var queue = html2Obj.parse();
var canvas = html2Obj.render(queue);
var img = canvas.toDataURL();
window.open(img);
var doc = new jsPDF('landscape', 'cm');
doc.addImage(img, 'JPEG', 1, 1, 27.7, 19);
doc.save('calendar.pdf');

So, how can I create that screenshot without losing the page content?

Answer 1

I think jspdf uses some default page height based on screen size but there is no practical height limit in pdf spec. you can just increase page size so that it can include more stuff.Pass a [width,height] in the constructor you may need to adjust exact value by trail and error

var doc = new jsPDF('landscape', 'cm', [50,50]);
doc.addImage(img, 'JPEG', 1, 1); //no explicit dimensions
doc.save('calendar.pdf');

EDIT: If that is the case then pass desired height width value in constructor

var html2Obj = html2canvas($('#calendar'),{width: desiredWidth,height:desiredHeight});