How to make image circe in Raphael js

Question

I am passing image to Raphael. Currently image is displaying square, i want the image to displayed in circle format.

<div class="demo"></div>

JavaScript

var r = Raphael("demo")

var myimage="xyz.jpg"

var img = r.image(myimage, 81, 80, 50, 50); 
   // displaying image in square (need to be circle)

Please help me out. Thanks

Answer 1

The function Element.attr(…), sets the attributes of an element. Perhaps you can create a circle and then fill it with your image. The attr is "fill".

var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");

That example is from the Raphael's web, you should try:

circle.attr("fill", myimage);

or

circle.attr("fill", "xyz.jpg");

Hope that helps, Gabriel.

Answer 2

You need to draw a circle and then fill it with an image. This has already been answered here.