Nos bénévoles n'ont pas encore traduit cet article en Français. Inscrivez-vous et aidez-nous à réaliser cette tâche !
Vous pouvez également lire cet article en English (US).

The CanvasRenderingContext2D.shadowBlur property of the Canvas 2D API specifies the level of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.

Syntax

ctx.shadowBlur = level;
level
A float specifying the level of the blurring effect. The default value is 0. Negative, Infinity or NaN values are ignored.

Examples

Using the shadowBlur property

This is just a simple code snippet using the shadowblur property to set a blurred shadow. Note that shadows are only drawn, if the shadowColor property is set to a non-transparent value, too.

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.shadowColor = 'black';
ctx.shadowBlur = 10;

ctx.fillStyle = 'white';
ctx.fillRect(10, 10, 100, 100);

Edit the code below and see your changes update live in the canvas:

Specifications

Specification Status Comment
HTML Living Standard
The definition of 'CanvasRenderingContext2D.shadowBlur' in that specification.
Living Standard  

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support Yes12 Yes Yes Yes Yes
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes Yes Yes Yes Yes Yes Yes

  • In WebKit- and Blink-based browsers, a 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);
    

See also

Étiquettes et contributeurs liés au document

Contributeurs à cette page : fscholz, nmve, erikadoyle
Dernière mise à jour par : fscholz,