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

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.