CanvasRenderingContext2D: shadowBlur property
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
TheCanvasRenderingContext2D.shadowBlurproperty of the Canvas 2D API specifies the amount of blur applied to shadows. Thedefault is0 (no blur).
Note:Shadows are only drawn if theshadowColor property is set toa non-transparent value. One of theshadowBlur,shadowOffsetX, orshadowOffsetY properties mustbe non-zero, as well.
Value
A non-negative float specifying the level of shadow blur, where0 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 is0. Negative,Infinity, andNaN values are ignored.
Examples
Adding a shadow to a shape
This example adds a blurred shadow to a rectangle. TheshadowColorproperty sets its color, andshadowBlur sets its level of blurriness.
HTML
<canvas></canvas>JavaScript
const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");// Shadowctx.shadowColor = "red";ctx.shadowBlur = 15;// Rectanglectx.fillStyle = "blue";ctx.fillRect(20, 20, 150, 100);Result
Specifications
| Specification |
|---|
| HTML # dom-context-2d-shadowblur-dev |
Browser compatibility
WebKit/Blink-specific notes
In WebKit- and Blink-based browsers, the non-standard and deprecated methodctx.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);See also
- The interface defining this property:
CanvasRenderingContext2D CanvasRenderingContext2D.shadowColor