1

I'm working on an application that needs to convert an HTML "workspace" (fixed size and absolutely positioned objects containing text and/or images) into an HTML5 canvas drawing. Due to the implementation of the canvas drawing methods, such as .fillText(), I'm having a really hard time adding the text of the elements to the canvas. That is, I cannot get the text on the canvas to have the same size as the text within the original workspace objects, despite the fact that I'm retrieving all the used CSS rules for it:

c.font = obj.title.fontStyle+' '+obj.title.fontWeight+' '+obj.title.fontSize+'px + obj.title.fontFamily;

// c = drawing context

By the way, the font-size for the elements is provided in pixels.

The app is located at http://picselbocs.com/projects/goalcandy/. You'll need to log in using 'demo@demo.com' for the email input and 'demo' as the password, then add an element that has a title from the left to the workspace, and aftward press "Convert to PNG". You'll notice how the text size increases.

How can I get around this frustrating problem?

arttronics
  • 9,957
  • 2
  • 26
  • 62
Andrei Oniga
  • 8,219
  • 15
  • 52
  • 89
  • so what does `c.font` contain after that assignment is made eg `alert(c.font);` – Chris Moutray Jul 03 '12 at 12:40
  • 1
    I tried in Safari and the font size is correct. It seems though that the line height is changing. – Torsten Walter Jul 03 '12 at 12:43
  • 1
    @mouters Have a look in the upper-left corner of the window (after clicking on 'Convert to PNG', I made a modification to display the content of "c.font" in the green container there. – Andrei Oniga Jul 03 '12 at 12:44
  • @Torsten Walter The font size is "nearly" correct, but not quite correct. It's somehow broader, which makes the text on a line jump on the next one in case it's as wide as the object itself. – Andrei Oniga Jul 03 '12 at 12:46
  • This site does work on IE or Chrome, but i can see the problem in FireFox – Chris Moutray Jul 03 '12 at 12:51
  • @mouters I'm not sure what you mean... – Andrei Oniga Jul 03 '12 at 12:56
  • Comparing pixel for pixel here and it looks good. I think what makes it look different is that the font rendering works differently. Font antialiasing on OS X Safari usually makes characters appear thicker. Maybe this happens in canvas as well, different antialiasing - different widths. – Torsten Walter Jul 03 '12 at 12:58
  • @TorstenWalter It's possible. But how to get around this problem? – Andrei Oniga Jul 03 '12 at 13:02

2 Answers2

1

As interesting as the problem might sound, it was in fact completely idiotic! Thus, the answer was unbelievably simple once the problem detected and the solution, applicable in 2 seconds (literally). The problem was not a cross-browser issue, but rather Chrome's zoom feature. I had previously zoomed in on the window inside which I opened the application, without knowing about it, which in turn rendered the canvas drawings blurry. So the solution: zoom out! %#$%#$@~!@

Andrei Oniga
  • 8,219
  • 15
  • 52
  • 89
0

This is a limitation of the canvas drawing algorithm and it seems you can't really get around this easily.

See this question for reference: Subpixel anti-aliased text on HTML5's canvas element

Community
  • 1
  • 1
Torsten Walter
  • 5,614
  • 23
  • 26