Question

I am wanting to create a drop shadow for an object (or anything for that matter) with Raphael. I was searching around the web and found some sources, but was unclear as to how I would apply it to my code. From what I understand there is a blur() method in Raphael but I didn't find it in their documentation. Anyways I am new to Raphael so if someone could provide some assistance I would appreciate it. Here is the code I have so far...

<html>
<head><title></title>
<script src="raphael-min.js"></script>
<script src="jquery-1.7.2.js"></script>
</head>

<body>

<div id="draw-here-raphael" style="height: 200px; width: 400px;">
</div>

<script type="text/javascript">
//all your javascript goes here

var r = new Raphael("draw-here-raphael"),

    // Store where the box is
    position = 'left',

    // Make our pink rectangle
    rect = r.rect(20, 20, 50, 50).attr({"fill": "#fbb"});



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

</script>

</body>
</html>
Was it helpful?

Solution

you need to use glow. here's an example

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top