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,

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,

• javascript
• raphael

2 Answers 2

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();

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