16

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 around?

5 Answers5

15

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

Sergey Glotov
  • 20,200
  • 11
  • 84
  • 98
David Herse
  • 471
  • 5
  • 8
  • +1 that worked for me. I'm doing a generic bubble widget using Raphael and jQuery. This helps, thanks. – King Friday Jun 08 '12 at 18:02
  • Thanks for this, didn't think of using glow. The defaults for glow are a black colour with a 0.5 opacity which would suggest that it's intended to be used for drawing drop-shadows. – Will Tomlins Jun 13 '12 at 15:17
  • The link in this answer is now inactive. I think you now need to use a plugin instead. – Daniel Arthur Feb 26 '18 at 14:26
11

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).

C-Mo
  • 1,192
  • 9
  • 9
5

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

dahoo
  • 61
  • 1
  • 5
2

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.

C-Mo
  • 1,192
  • 9
  • 9
  • but a shadow colored fill will have a solid edge. I am looking for an edge that blurry, from light gray to 0% alpha. you know? –  Oct 07 '10 at 03:38
  • 1
    Raphael does have a blur plugin. I've never used it, so I can't vouch for it, but it's by Dmitry so we can assume he knows what he's doing ;-) http://github.com/DmitryBaranovskiy/raphael/blob/master/plugins/raphael.blur.js – C-Mo Oct 07 '10 at 04:03
  • Oh that is interesting. You should submit it as an answer and I will accept it. If you don't then I will answer it myself with in 3 days. Thanks. Still drop shadow should be coded into Raphael to make it simpler. –  Oct 07 '10 at 18:39
0

You can use a glow to add shadows.

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

check out the documentation

Ueli
  • 2,301
  • 5
  • 25
  • 29