<!DOCTYPE html>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
/*
The shadow and shadow blur effects should be the same regardless if they were
defined with filters or properties. The blur parameter is set as double when
using the shadowBlur property since its uses havlf of the value set as the
standard deviation for the gaussian blur (https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-shadowblur-dev)
while the filter parameter is used directly as the standard deviation
(https://drafts.fxtf.org/filter-effects/#funcdef-filter-drop-shadow). The
fuzziness is defined with a maxDifference of 13 as to be the 5% of 256, since
the CSS spec defines the expected behavior in relation to an ideal Gaussian blur
with a tolerance of 5%. See: https://drafts.csswg.org/css-backgrounds-3/#shadow-blur.
*/
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 4;
ctx.shadowColor = 'red';
ctx.fillRect(20, 20, 50, 50);
ctx.shadowBlur = 8;
ctx.shadowColor = 'blue';
ctx.fillRect(100, 20, 50, 50);
ctx.shadowBlur = 20;
ctx.shadowColor = 'yellow';
ctx.fillRect(20, 100, 50, 50);
ctx.shadowBlur = 30;
ctx.shadowColor = 'cyan';
ctx.fillRect(100, 100, 50, 50);
</script>
Codebase Browser
chromium