Gecko:ShadowsAndBlurring
Web Platform Features
Canvas shadows
Every canvas drawing operation can draw a shadow with a given offset, color and blur radius. The offset and blur radius are always interpreted in device space. The drawn object is always drawn above its shadow; both the shadow and the object are drawn with the current composition operator. Alpha values in the drawn object create gaps in the shadow. The important drawing operations:
- drawImage
- fillRect
- fill
- stroke
- fillText
text-shadow
Draws any number of shadows behind the text. Each shadow has a given offset, color and blur radius. The offset and blur are interpreted in user space (hence can be stretched by transforms). The shadow is always derived from the glyph bounds; alpha in the text color does not affect the shadow. The shadows and the text are always drawn with the 'over' operator.
box-shadow
Draws any number of shadows of the rounded-rect defining the border-box. The object this is the shadow of is generally not drawn, but it is excluded from the shadow as if it was over the shadow. The rounded rect is four straight sides with an elliptical arc (possibly different sizes) for each corner. Each shadow has an offset, color, and blur radius. (There's also a spread radius but we can account for that when we compute the rounded rect for the shadow.) The offset and blur are interpreted in user space (hence can be stretched by transforms). The shadows are always drawn with the 'over' operator.
For performance, our current implementation exploits the fact that most shadow offsets are small and hence most pixels in the shadow's bounds are not actually needed since they're excluded from the shadow by the border-box. We pass in a "skip rect" indicating a rectangle within which no shadow pixels are needed.
SVG feGaussianBlur
Takes an input RGBA surface and applies a Gaussian blur with independent X and Y radii.
CSS3 filter:blur()
Similar to feGaussianBlur but only has one radius. (Not yet implemented in Gecko.)
CSS3 filter:drop-shadow()
Takes an input surface, extracts the alpha channel, applies an offset and single blur radius, and uses that as a mask for the specified shadow color. (Not yet implemented in Gecko.)