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

我正在创建多个html5画布，每个画布包含一个图形（矩形、圆形等），它们需要整齐地适合每个画布，包括任何阴影

如果没有dropshadow参数和图形（例如矩形），则可以知道生成图形的确切宽度和高度。 但是，设置dropshadow和blur时，如何预测生成图形的宽度和高度

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

身体

JSFIDLE示例如下：

---

谢谢

让你的小提琴和你的代码一样总是一个好主意！谢谢你，乔恩。更新，使他们匹配。

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

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