How to allow text to be entered into a raphael object, say rect?

Question

I created a Raphael fix as shown below: var rect1 = paper.rect(100,100,100,100)

Now, when I click on the rectangle, a cursor appears and the user is allowed to enter / paste text

I am very new to JS and Raphael.

Answer 1

This is not a natural use of Raphael. Think of this primarily as a drawing library. If you look at the SVG specifications or any of the demos on the RaphaelJS page, you get this idea.

But Raphael naturally integrates with her own Javascript or jQuery. I would place a borderless text area on top of your rectangle and activate (and focus) it when the user clicks on a space, for example:

 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 for the click event to occur.)