HTML canvas: Why does a large shadow blur not show up for small objects?

Question

Here's a demonstration:

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>

If I set shadowBlur=10 and then draw a small 10x10 square, I get a nice, strong shadow. The same if I set shadowBlur=50 and draw a big 70x70 square. But if I set shadowBlur=50 and then draw a small 10x10 square, I get a very faint, barely visible shadow.

Instead I would have expected a small center square and a large dark shadow all around it.

Obviously I misunderstand how the shadow blur works, so - how does it work, and how do I get a large dark shadow around a small object?

Answer 1

The shadowBlur uses Gaussian blur to produce the shadow internally. The object is drawn to a separate bitmap as stencil in the shadow-color and then blurred using the radius. It does not use the original shape after this step. The result is composited back (as a side-note: there was previously a disagreement on how to composite shadows so Firefox and Chrome/Opera rendered them differently - I think they have landed on source-over in both camps by now though).

If the object is very small and the blur radius very big, the averaging will be thinned by the empty remaining space around the object leaving a more faint shadow.

The only way to get a more visible shadow with the built-in method is to use a smaller radius. You can also "cheat" using a radial gradient, or draw a bigger object with shadow applied to an off-screen canvas but offset relative to the shadow itself so the object doesn't overlap it, then draw the shadow only (using clipping arguments with drawImage()) back to main canvas at desired size before drawing main object.

In newer versions of the browsers you can also produce Gaussian blurred shadows manually using the new filter property on the context with CSS filters. It do require some extra compositing steps and most likely an off-screen canvas for most scenarios, but you can with this method overdraw shadows in multiple steps with variable radii from small to bigger producing a more pronounced shadow at the cost of some performance.

Example of manually generated shadow using filter:

This allow for more complex shapes like with the built-in shadow, but offer more control of the end result. "Falloff" in this case can be controlled by using a easing-function with an initial normalized radius value inside the loop.

// note: requires filter support on context
var ctx = c.getContext("2d");

var iterations = 16, radius = 50,
    step = radius / iterations;
for(var i = 1; i < iterations; i++) {
  ctx.filter = "blur(" + (step * i) + "px)";
  ctx.fillRect(100, 50, 10, 10);
}

ctx.filter = "none";
ctx.fillStyle = "#fff";
ctx.fillRect(100, 50, 10, 10);

<canvas id=c></canvas>

Example of gradient + filter:

This is a more cross-browser friendly solutions as if filter is not supported, at least the gradient comes close to an acceptable shadow. The only drawback is it is more limited in regards to complex shapes.

Additionally, using a variable center point for the gradient allows for mimicking fall-off, light size, light type etc.

Based on @Kaiido's example/mod in comment -

// note: requires filter support on context
var ctx = c.getContext("2d");

var grad = ctx.createRadialGradient(105,55,50,105,55,0);
grad.addColorStop(0,"transparent");
grad.addColorStop(0.33,"rgba(0,0,0,0.5)"); // extra point to control "fall-off"
grad.addColorStop(1,"black");

ctx.fillStyle = grad;
ctx.filter = "blur(10px)";
ctx.fillRect(0, 0, 300, 150);

ctx.filter = "none";
ctx.fillStyle = "#fff";
ctx.fillRect(100, 50, 10, 10);

<canvas id=c></canvas>