HTML canvas:为什么小对象不显示大阴影模糊？

Question

下面是一个演示：

​

var ctx = document.getElementById("test").getContext("2d");

ctx.shadowColor = "black";
ctx.fillStyle = "white";

ctx.shadowBlur = 10;
ctx.fillRect(10, 10, 10, 10);

ctx.shadowBlur = 50;
ctx.fillRect(70, 10, 10, 10);
ctx.fillRect(70, 70, 70, 70);

<canvas id="test" width="200" height="200"></canvas>

​

如果我设置shadowBlur=10，然后画一个10x10的小正方形，我会得到一个漂亮的，强烈的阴影。如果我设置shadowBlur=50并绘制一个70x70的大正方形，情况也是如此。但是如果我设置shadowBlur=50，然后绘制一个10x10的小正方形，我会得到一个非常模糊的、几乎看不见的阴影。

相反，我本以为会有一个小的中心正方形和一个巨大的黑影围绕着它。

显然，我误解了阴影模糊的工作原理，那么-它是如何工作的，我如何在一个小物体周围获得一个巨大的黑色阴影？