如何测量html5图形的宽度和高度，包括阴影

Question

我正在创建多个html5画布，每个画布都包含一个图形（矩形，圆形等），并且它们需要整齐地放入每个画布中，包括任何阴影。

如果没有阴影参数和绘图（例如矩形），您可以知道生成的图形的确切宽度和高度。 但是，当您设置“阴影”和“模糊”时，如何预测生成的图形的宽度和高度？

例如，使用Javascript，我将如何计算矩形的高度和宽度以及投影，在以下代码中：

体

<canvas id="myCanvas" width="300" height="300"></canvas>

的Javascript

  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();

JSfiddle示例在这里：http://jsfiddle.net/csu3vxk3/1/

谢谢！