PDF is a complicated format. So we have to use an external library such as jsPDF.
The idea of saving canvas to pdf is simple:
- Generate canvas content
- Export canvas into the image
- Add image into PDF document created with the PDF library
- Save PDF file
Also I have two tips for you:
Thanks to High quality Exports, you can increase the quality of a PDF using
pixelRatioattribute when you are converting a node into the image.
It is possible to make a text selectable in the PDF. Even if we are adding the canvas into the PDF as an image, we can insert texts manually. That is not trivial and it can be difficult if you have complex styles. Also text rendering on PDF is different from the text rendering with
Konva. But we can try to make it as close as possible. For the demo, we will draw “hidden” text inside PDF file. The text will be places under the image, so it is no visible. But it is still selectable. As a demo of “complex styles” I will blur the text.
Instructions: take a look into the canvas. Then try to save it as PDF.