canvas.loadFromJSON() showing text bulry for google fonts

Question

I am facing this problem for a long time. I am generating the flipbook from the canvas using Fabricjs. I am changing the text content color and fonts on the fly. Everything is working fine but when I am trying to use google fonts so in that case text shows blurred and ugly.

Once the image is generated from JSON using canvas and converted the canvas to blob type of images and then I am converting HTML to flipbook.

Sample code Demo

<script async src="//jsfiddle.net/kantsverma/6yanokf1/5/embed/"></script>

Answer 1

Are you stretching the canvas. ie setting a canvas width of 500px then using css to make width 100%. this effectively renders at the lower resolution then stretches the final rendered image.