CODEWITHSUNDEEP
javascriptraphael
John Doe
John Doe

Reputation: 2060

Raphael Javascript

I am new to Raphael and am trying to do something very simple, but failing miserably. Does anyone know how to create a Raphael canvas and set the background color (ex: green)? This is what I have so far, but when I open it in a browser it displays nothing....

<html>
<head><title></title>
<script src="raphael-min.js"></script>
</head>

<body>

<script type="text/javascript">
//all your javascript goes here

var paper = Raphael(15,40,320,300);

</script>

</body>
</html>

When I put this code inside the js script it displays a circle correctly...

var circle = paper.circle(50,10,10);
circle.attr("fill","#0f0");

But again, my issue is trying to set the background color. Any help would be appreciated.

Thanks

Upvotes: 0

Views: 1940

Answers (2)

Chris Wilson
Chris Wilson

Reputation: 6719

You could also draw a rectangle the size of the canvas:

var paper = Raphael("my_paper_div", 600, 400),
    placemat = paper.rect(0,0,paper.width,paper.height).attr({"fill" : "#99FF99" });

I usually start this way with Raphael projects because I find it useful to have an object in the background to which to attach events, like a click event that closes all open tooltips.

See example.

Upvotes: 1

pp19dd
pp19dd

Reputation: 3633

RaphaelJS doesn't provide a default background styling, since its event system relies on being object-driven. However, you can designate a particular DIV and style it accordingly:

<div 
    id="my_paper_div" 
    style="background-color:limegreen;width:400px;height:400px"
></div>

Make sure you don't call either the DIV or variable paper. Give them different names, otherwise you'll run into some IE incompatibility.

Redeclare your paper javascript like so:

// declare outside the startup scope, so you can do fancy things later
var my_paper;

// raphaeljs' version of onload
Raphael( function() {
    my_paper = Raphael("my_paper_div", 400, 400);
});

Since RaphaelJS rendering doesn't interfere with the background, you can technically mix and match HTML and SVG/VML. For example, see this jsfiddle: http://jsfiddle.net/NQtU5/

Upvotes: 3

Related Questions