How to keep display crispness when drawing dom node on canvas?

Question

JavaScript

how the code
looks like
I'm making an example generator for the school of mental arithmetic. I generate pdf using jspdf and output it to the right side of the block. To hook css, I first draw #thehtml in the canvas (just below the block itself) using rasterizeHTM L. On the left there will be parameters based on which examples will be generated, but for now I have driven the examples myself.
If you click on the generate button, then examples will be visible on the right side (at the same time, pdf will be downloaded, this is for a test in order to view the result in full).
What is the question, you say? The point is that everything works, but the result that rasterizeHTML draws on the canvas does not quite match the prototype ( #thehtml). Namely, I do not like that the picture is fuzzy, slightly blurry .
Is it possible to somehow set it up so that the result matches the prototype in terms of clarity?
I understand that it was possible not to draw the dom node on the canvas, but to immediately pass 'this node to the pdf.fromHTML function : The result will be clear, but the css will not work. UPDATED: what fixed looks like Error in console prevents pdf viewer from loading. As a solution to this problem, you can take it for yourself and look in debug (everything works there).
pdf.fromHTML(this.$refs.thehtml, 0, 50);