Question

I have created a Raphael rect like below:
var rect1 = paper.rect(100,100,100,100)

Now, I want that as I click on the rect a cursor appears and user is allowed to type/key in some text

I am very very new to JS and Raphael.

Answer 1

That’s not a natural use of Raphael. Think of it primarily as a drawing library. If you look through the SVG specifications or any of the demos on the RaphaelJS page, you’ll get the idea.

But Raphael integrates naturally with native Javascript or jQuery. I would place a borderless textarea on top of your rectangle and activate (and focus) it when the user clicks on the space, like so:

var paper = Raphael("canvas", 300, 300),
    rect1 = paper.rect(100,100,100,100).attr({fill: "#FFF"});

rect1.click(function(e) {
   $('#text').show(); 
   $('#text').focus(); 
});
​

http://jsfiddle.net/NtKKZ/

(Note that you need to fill the rectangle with white in order for the click event to fire.)