title: Automatically Crop HTML5 canvas to contents
body: <p>Let's say this is my canvas, with an evil-looking face drawn on it.  I want to use <code>toDataURL()</code> to export my evil face as a PNG; however, the whole canvas is rasterised, including the 'whitespace' between the evil face and canvas edges.</p>
  
  <pre><code>+---------------+
  |               |
  |               |
  |     (.Y. )    |
  |      /_       |
  |     \____/    |
  |               |
  |               |
  +---------------+
  </code></pre>
  
  <p>What is the best way to crop/trim/shrinkwrap my canvas to its contents, so my PNG is no larger than the face's 'bounding-box', like below?  The best way seems to be scaling the canvas, but supposing the contents are dynamic...?  I'm sure there should be a simple solution to this, but it's escaping me, with much Googling.</p>
  
  <pre><code>+------+
  |(.Y. )|
  | /_   |
  |\____/|
  +------+
  </code></pre>
  
  <p>Thanks!</p>