Chapter 2. Shapes

In the introduction, we looked at a complete working example of Raphael that drew a red dot on the page. Since Raphael is a fundamentally visual toolkit, this will take the place of the canonical “Hello World” example in the first chapter of programming books since time immemorial.

In case, like me, you never read the introduction, here it is again.

<!DOCTYPE html>
<html>
    <head>
        <title>Red dot</title>
    </head>
    <body>
        <div id="container"></div>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
        <script>
var paper = Raphael("container", 500, 300);
var dot = paper.circle(250, 150, 100).attr({
    fill: "#FF0000",
    stroke: "#000099",
    "stroke-width": 3
});
        </script>
    </body>
</html>
image with no caption

See this code live on jsFiddle.

Let’s do a deep dive into this example.

Getting Raphael

Like jQuery, Google Maps, Backbone, or any other JavaScript library, Raphael is neatly packed in a single external library that you include in your webpage with a <script> tag:

<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-
min.js"></script>

CloudFlare is a cloud services company that generously provides a free CDN, or “content delivery network,” for fast, highly available access to Raphael (and many other JavaScript libraries). I’m using it here because it prevents me from needing to say things like “first download the Raphael script, then put it in same ...

Get RaphaelJS now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial