Home/ Questions/Q 8135927
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T10:34:59+00:00

I am new to Raphael and am trying to do something very simple, but

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0