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>
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, ...
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.