title: How to measure width and height of html5 graphic, including drop shadow
body: <p>I am creating multiple html5 canvases, each one containing a single graphic (rectangle, circle etc), and they need to fit neatly into each canvas, including any drop shadow.</p>
  
  <p>Without dropshadow parameters, and drawing, for example, a rectangle, you can know the exact width and height of the resulting graphic.
  However, when you set dropshadow, and blur, how can you predict the width and height of the resulting graphic?</p>
  
  <p>For example, using Javascript, how would I calculate the height and width of the rectangle and drop shadow, in the following code:</p>
  
  <p>body</p>
  
  <pre><code>&lt;canvas id="myCanvas" width="300" height="300"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>  var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
  
    context.rect(0, 0, 200, 100);
    context.fillStyle = 'red';
    context.shadowColor = '#999';
    context.shadowBlur = 20;
    context.shadowOffsetX = 20;
    context.shadowOffsetY = 20;
    context.fill();
  </code></pre>
  
  <p>JSfiddle example is here: <a href="http://jsfiddle.net/csu3vxk3/1/" rel="nofollow">http://jsfiddle.net/csu3vxk3/1/</a></p>
  
  <p>thanks!</p>