3

I have made UTF 8 work in jsPDF to be able to print any character in a PDF from Javascript.

Arab, Chinese, Turkish it all works.

Check my fiddle: http://jsfiddle.net/oscoweb/fqpgcap1/2/

The thing I am doing is:

  1. Write to canvas
  2. Make image from canvas
  3. Embed image in PDF
  4. Save PDF

This works... kinda... because it is ugly!

Therefor I need help in "1. Write to canvas". The text I am writing there is hardly readable and blurry.

context.fillStyle = "#000000";
context.font = "Arial 14px";

context.fillText("English", 1, 20);
context.fillText("Español", 1, 30);
context.fillText("Türk", 1, 40);
context.fillText("中國", 1, 50);

Any help on how to write text to Canvas and keep it readable would be greatly appreciated.

Oscar Bout
  • 690
  • 5
  • 19

1 Answers1

2

I believe the problem is with the low pixel ratio of the canvas.

Chack this article: http://www.html5rocks.com/en/tutorials/canvas/hidpi/

EDIT:

I just noticed you set the canvas size with CSS. This might also be a problem: canvas arc too pixelated

This might be helpful too: Poor anti-aliasing of text drawn on Canvas

Community
  • 1
  • 1
godzsa
  • 2,105
  • 4
  • 34
  • 56
  • So basicly playing around with "context.scale(ratio, ratio);" should make it more readable? – Oscar Bout Nov 12 '15 at 15:44
  • 1
    @OscarBout I think so. Printed media has around 300DPIs while web has 72DPIs. This varies based on the device, see pixel ratio. I think when you scale canvas you achieve this "conversion". I have not tested, but seems reasonable to me. – godzsa Nov 12 '15 at 15:52
  • Thank you I will check it out. This seems a nice playground to check things: http://jsfiddle.net/X2cKa/ – Oscar Bout Nov 12 '15 at 17:05