The CanvasRenderingContext2D.shadowBlur
property of the Canvas 2D API specifies the amount of blur applied to shadows. The default is 0
(no blur).
A non-negative float specifying the level of shadow blur, where 0
represents no blur and larger numbers represent increasingly more blur. This value doesn't correspond to a number of pixels, and is not affected by the current transformation matrix. The default value is 0
. Negative, Infinity
, and NaN
values are ignored.
This example adds a blurred shadow to a rectangle. The shadowColor
property sets its color, and shadowBlur
sets its level of blurriness.
HTML
<canvas id="canvas"></canvas>
JavaScript
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.shadowColor = "red";
ctx.shadowBlur = 15;
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 150, 100);
Result
In WebKit- and Blink-based browsers, the non-standard and deprecated method ctx.setShadow()
is implemented besides this property.
setShadow(width, height, blur, color, alpha);
setShadow(width, height, blur, graylevel, alpha);
setShadow(width, height, blur, r, g, b, a);
setShadow(width, height, blur, c, m, y, k, a);