如何将DIV文本转换为HTML5画布绘图

Question

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?

Answer 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! %#$%# $@~!@

Answer 2

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