Set the background color of text in Raphael

Question

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

Thanks,

Answer 1

The background of the 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 complete list of properties, see the Raphael Documentation.

Answer 2

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

 var text = canvas.text(px, py, 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();