O'Reilly logo

RaphaelJS by Chris Wilson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required


I once heard programming described as a way to “express your ideas through a computer.” To me, that morsel of wisdom encapsulates everything that is wonderful and awful about writing code: it gives us the vocabulary to work through our ideas and then lays bare the limits of our ingenuity.

If everyone had the same sorts of ideas, we would only need one programming language. The quotation above comes from a book about Ruby, which many people will fervently argue is the finest language around (often long after you would have preferred to change the subject).

But of course, people have all sorts of wild ideas that cannot be properly served by one language. This book, which is about the JavaScript library called Raphael, is for a specific subset of human ideas: visual ones.

If you’re a person who thinks visually and wants to learn to code, there’s a good chance you’ve been frustrated by efforts to learn classical programming languages like Ruby, Python, PHP, or even JavaScript itself, the programming language that is embedded in every web browser. Most tutorials tend to start you out with printing words to the screen, writing functions to print more words to the screen, and, if you’re lucky, maybe branching into printing numbers to the screen by the end of the first lesson.

In RaphaelJS, we’ll be painting the screen with all manner of shapes and colors, animating them through space and time, and bending them to our will (via the tyranny of our mouse and fingers). Every example and lesson in this book runs in the browser and is 100% web-ready, meaning you can upload it directly to your site to have living, breathing visuals that run in any browser.

While this book is not explicitly an introduction to JavaScript, I’ve done my best to make it accessible to people who are new to the field. None of the code in this book requires advanced mastery of computer science or a deep foundational understanding of JavaScript. It is meant to get both new and experienced coders up and running as fast as possible.

The only tool we need for this book, besides a computer, is the Raphael.js library, which is open-source and freely available at RaphaelJS.com under the MIT License. Bringing a few visual ideas to the table won’t hurt, either. By the end of this manual, you’ll be ready to express them in code.

Conventions Used in This Book

The following typographical conventions are used in this book:

Indicates new terms, URLs, email addresses, filenames, and file extensions.
Constant width
Used for program listings, as well as within paragraphs to refer to program elements such as variable or function names, databases, data types, environment variables, statements, and keywords.
Constant width bold
Shows commands or other text that should be typed literally by the user.
Constant width italic
Shows text that should be replaced with user-supplied values or by values determined by context.


This icon signifies a tip, suggestion, or general note.


This icon indicates a warning or caution.

Using Code Examples

Supplemental material (code examples, exercises, etc.) is available for download at http://jsfiddle.net/user/raphaeljs/fiddles.

This book is here to help you get your job done. In general, if example code is offered with this book, you may use it in your programs and documentation. You do not need to contact us for permission unless you’re reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing a CD-ROM of examples from O’Reilly books does require permission. Answering a question by citing this book and quoting example code does not require permission. Incorporating a significant amount of example code from this book into your product’s documentation does require permission.

We appreciate, but do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN. For example: “RaphaelJS by Chris Wilson (O’Reilly). Copyright 2014 Chris Wilson, 978-1-449-36536-3.”

If you feel your use of code examples falls outside fair use or the permission given above, feel free to contact us at .

Safari® Books Online


Safari Books Online is an on-demand digital library that delivers expert content in both book and video form from the world’s leading authors in technology and business.

Technology professionals, software developers, web designers, and business and creative professionals use Safari Books Online as their primary resource for research, problem solving, learning, and certification training.

Safari Books Online offers a range of product mixes and pricing programs for organizations, government agencies, and individuals. Subscribers have access to thousands of books, training videos, and prepublication manuscripts in one fully searchable database from publishers like O’Reilly Media, Prentice Hall Professional, Addison-Wesley Professional, Microsoft Press, Sams, Que, Peachpit Press, Focal Press, Cisco Press, John Wiley & Sons, Syngress, Morgan Kaufmann, IBM Redbooks, Packt, Adobe Press, FT Press, Apress, Manning, New Riders, McGraw-Hill, Jones & Bartlett, Course Technology, and dozens more. For more information about Safari Books Online, please visit us online.

How to Contact Us

Please address comments and questions concerning this book to the publisher:

O’Reilly Media, Inc.
1005 Gravenstein Highway North
Sebastopol, CA 95472
800-998-9938 (in the United States or Canada)
707-829-0515 (international or local)
707-829-0104 (fax)

We have a web page for this book, where we list errata, examples, and any additional information. You can access this page at http://oreil.ly/raphael-js.

To comment or ask technical questions about this book, send email to .

For more information about our books, courses, conferences, and news, see our website at http://www.oreilly.com.

Find us on Facebook: http://facebook.com/oreilly

Follow us on Twitter: http://twitter.com/oreillymedia

Watch us on YouTube: http://www.youtube.com/oreillymedia


First and foremost, I would like to thank my wife Susan, who always dreamed that someday her husband would write her a book on JavaScript visualization.

We are all indebted to Dmitry Baranovskiy, the inventive force behind the Raphael library, and to the dozens of others who have contributed ideas and fixes. Dmitry truly led the charge in uniting the divergent drawing technologies on the Web, making all of the wonderful visuals we enjoy online today possible.

I’m indebted, of course, to my crack team of editors at O’Reilly: Simon St. Laurent, Meghan Blanchette, and Allyson MacDonald. And a special thanks to Gretchen Giles, whose response to my tweet wondering whether O’Reilly authors get to pick the woodcut on their covers kicked off this whole process. They do not, but I couldn’t be happier with the Nile Valley Sunbird.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required