jsPDF with html2canvas producing blurry pdf?

Question

I'm currently converting a div's contents to png via html2canvas, however the use of scale: 5, or dpi: etc. has no affect whatsoever on consequent image quality. It is a result of html2canvas, as I append the canvas during the pdfcon() function, and its very blurry :). I've scraped the internet for answers to no avail, any help would be appreciated :). (I'm also using Quill editor)

HTML:

    <div id="editorOne" class="pdf-convert ql-container ql-snow">
        <div id="specialEdit" class="ql-editor" data-gramm="false" contenteditable="false">
            <?php echo stripslashes($newClean); ?>
        </div>
    </div>
    <button onclick="pdfcon()">Save Pdf</button>

JS:

function pdfcon() {
                html2canvas($("#editorOne"), {
                    scale: 5,
                    onrendered: function (canvas) {
                        document.body.appendChild(canvas);
                        var img = canvas.toDataURL("png");

                        var doc = new jsPDF("p", "mm", "a4");

                        var width = doc.internal.pageSize.getWidth();
                        var height = doc.internal.pageSize.getHeight();

                        doc.addImage(img, 'PNG', 0, 0, width, height);
                        doc.save('testing.pdf');
                    }
                })
            };

Answer 1

You can give it a better quality. In html2canvas you have the quality levels 0-4 for that.

You have to add it as a parameter to the object.

html2canvas($("#editorOne"), {
                quality: 4,
                scale: 5,

But be aware, quality level 4 makes pdf files with a size of about 60mb. The best option is to use quality level 1 or 2.