How can one add drop shadows to Raphael.js objects?

Question

I would like to find out how to add blurry edged drop shadows to Raphael.js objects/paths. As far as I know it is not possible with the library as is but is there a work aro

Answer 1

You can use the Element.glow([glow]) to get a shadow effect. http://raphaeljs.com/reference.html#Element.glow

Answer 2

You can use a glow to add shadows.

.glow({ color: '#900', width:10, offsetx:5 }) // random example...

check out the documentation

Answer 3

I wrote a plugin that adds a drop shadow to an element by applying an SVG filter to it. It's based on the blur plugin.

You can find it here: https://github.com/dahoo/raphael.dropshadow.js

Answer 4

Adding a link to Raphael.blur in a separate answer, per the OP's request.

http://github.com/DmitryBaranovskiy/raphael/blob/master/plugins/raphael.blur.js

Updated code sample:

var shadow = canvas.path(p);
shadow.attr({stroke: "none", fill: "#555", translation: "4,4"});
shadow.blur(4);
var shape = canvas.path(p);

Note that in Dmitry's comments he mentions that there is no WebKit support. He uses the <filter> element and the feGaussianBlur filter effect. WebKit has implemented the feGaussianBlur effect, but filters are unstable and are disabled in Safari (it may work in Chrome 5 - should definitely work in Chrome 6).

Answer 5

The easiest way to do it is simply to draw the object with a shadow-colored fill, offset by a few pixels, and then draw the actual object on top.

var shadow = canvas.path(p);
shadow.attr({stroke: "none", fill: "#555", translation: "4,4"});
var shape = canvas.path(p);

You can also adjust the opacity attribute if needed.