In order to use Raphaël, you'll need to include the library. This can be downloaded
here or you can include the js file by copying and pasting the following line and placing it between the
<head> </head> tags of your html file.
<script src="http://math.mercyhurst.edu/~lwilliams/js/raphael-min.js"></script>
An understanding of JavaScript programming is necessary to use Raphael. It is also helpful to be familiar with SVG, CSS, and HTML.
Create a Paper
All shapes you'll create in Raphaël are assigned to a paper (an HTML canvas). You can include as many papers as you like in a single HTML page. Begin by creating a div where your paper will be placed - the usual HTML positioning can be done with respect to this div. Give the div an id so the paper can be placed there:
<div id="myFirstPaperDiv"></div>
Next, create a JavaScript block and define your paper. You must specify a size for the paper (this cannot be be fluid, but does not need to be the size of the div if you've given it one). Below, a paper called 'myPaper' is defined to be 400 pixels wide and 200 pixels high. Any elements added to the paper outside this area will not be visible.
<div id="myFirstPaperDiv"></div>
<script type="text/javascript">
var myPaper = new Raphael( document.getElementById('myFirstPaperDiv'), 400, 200 )
</script>
So far, you won't see anything but a space in your site where the div appears.
Add an Element
Raphaël can draw lots of shapes (see the Elements tab above) but for now we'll stick with a circle and make it red.
<div id="myFirstPaperDiv"></div>
<script type="text/javascript">
var myPaper = new Raphael( document.getElementById('myFirstPaperDiv'), 400, 200 )
var newCircle = myPaper.circle( 100, 80, 75).attr({ 'fill': 'red' })
</script>
Notice that we used the name of the paper when defining the element. This assigns it to that paper and div. We can use the same JavaScript block to define lots of elements for several papers, but for simplicity and ease of reading, try to define a new block for each paper.
The result of the code above would be