I have written some code that displays two chart.js charts on a web page and then alows user to download the charts in pdf using jsPDF. The problem is that the resolution of the charts in pdf depends on the dpi settings of the display. For example, when I create the pdf using my work PC (1080p) the resolution is pretty bad. However, when my colleague uses us Macbook to generate the pdf, the images are very crisp.
How can I make the images independant of the display resolution and always produce high-res images. I am using toDataURL along with addImage to insert images into PDF.
I can also upload the code if needed.
Thanks
Since you are displaying charts in chart.js on a web page, the addImage data in jsPDF always depends on the resolution of your display. In your case you generated it on a low resolution PC and a macbook with a Retina display, and since the size of the image data set in addImage is different, the resolution of the PDF will naturally change as well.
My idea is to solve this problem by always keeping the size of the image data set by addImage constant.
I think you can use Window.devicePixelRatio to keep the size of the image data constant while taking into account the resolution of the screen.
https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio ...
What do you think?