Canvas drawImage with high quality - Javascript

user_10064459 0
Viewed 297

I'm using konva.js to draw elements on an HTML Canvas. When the user finishes its design in the canvas, the creation can be exported into a PDF file. In this context, my HTML structure is the following:

  • a div "canvas" to append all the canvas
  • a div "canvas0/canvas1" and so on to append each konva-canvas
  • an auto-generated div "konvajs-content"
  • and finally, multiple canvases depending on the number of layers

So, to export the PDF I have to go through each div "canvas + number" and then go through each canvas childNodes to use the getContext('2d') and drawImage function to draw an Image with the contents of each canvas (hopefully this description is not too confusing...).

Well, I'm able to export the pdf with multiple pages according to the number of canvases drawn, but the image drawn from the canvas has very low quality. Finally, my doubt is, how can I export it with higher quality?

2d-context-api konvajs drawimage canvas javascript
2 Answers

Theres a clever trick to i crease the resolution. step 1 make your canvas twice bigger like this:

canvas.width=innerWidth*2;
canvas.height=innerHeight*2;

step 2 to make canvas cover entire width set its width and height from css like this:

canvas{ width:100%; }

thats it . At the end you will have doubled the image resolution and make sure you use width:100%; in css not as its attribute in html.

Hope that works for you.

user_82010250
user_5120420
Related