Setting text background color in Raphael

Question

I am using Raphael-js to position text on a canvas. Is it possible to have a background color for the text? I would like different text elements to have different backgrounds colors.

Thanks,

Answer 1

Yes, there is no way to specify background for text, here is how to create rectangle that will serve as a background:

var text = canvas.text(p.x, p.y, poly.title).attr(textAttr);
var box = text.getBBox();
var rect = canvas.rect(box.x, box.y, box.width, box.height).attr('fill', 'black');
text.toFront();

Answer 2

The background of text is known as "fill" and can be applied using the attr function as follows:

paper.text(50, 50, "Example").attr("fill", "#000000");

For a full listing of the properties, see the Raphael Documentation