title: How to convert DIV text to HTML5 canvas drawing
body: <p>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:</p>
  
  <pre class="lang-js prettyprint-override"><code>c.font = obj.title.fontStyle+' '+obj.title.fontWeight+' '+obj.title.fontSize+'px + obj.title.fontFamily;
  
  // c = drawing context
  </code></pre>
  
  <p>By the way, the font-size for the elements is provided in pixels.</p>
  
  <p>The app is located at <a href="http://picselbocs.com/projects/goalcandy/" rel="nofollow">http://picselbocs.com/projects/goalcandy/</a>. 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.</p>
  
  <p>How can I get around this frustrating problem?</p>