CODEWITHSUNDEEP
javascriptjqueryraphael
user962775
user962775

Reputation:

Manipulate canvas background color in Raphael by using variable paper

I want to set the background color to a specific color. I use the following code:

//JavaScript Code
var paper = Raphael(200, 350, 320, 200);
paper.attr("fill", "#f00");

Somehow, this code doesn't work. Please help, how can I set the background color of paper?

Upvotes: 10

Views: 5518

Answers (2)

MattDiamant
MattDiamant

Reputation: 8791

See the answer below for a better way, but you can make a rectangle that fills the whole canvas area:

var paper = Raphael(200, 350, 320, 200);
var rect = paper.rect(0, 0, 320, 200);
rect.attr("fill", "#f00");
rect.attr("stroke", "#f00");

Upvotes: 3

Kevin Nielsen
Kevin Nielsen

Reputation: 4433

Actually, it is entirely possible to set the background color for an SVG canvas -- the caveat here is that, though Raphael controls all of the elements inside the canvas, it offers very little stylistic control directly over the canvas itself.

Fortunately, you can get access to the dom node associated with a Raphael paper object through its canvas property. That makes it easy to do things like this:

var paper = Raphael(200, 350, 320, 200);
paper.canvas.style.backgroundColor = '#F00';

Better yet, you could define your canvas background/border/padding as part of your application's stylesheet, and then just make sure the canvas is set to use the appropriate style:

var paper = Raphael(200, 350, 320, 200);
paper.canvas.className += ' my_svg_class';

Upvotes: 26

Related Questions