Mindon.IDEA

Air off, Mind on ~ / Javascript+Golang, Sci, Health… /

Web-Drawing Throwdown: Paper.js vs. Processing.js vs. Raphael

Before drawing anything in a browser, ask yourself three questions:

Do you need to support older browsers?

If the answer is yes, then your only choice is Raphaël. It handles browsers all the way back to IE 7 and Firefox 3. Raphaël even has some support for IE 6, although some of its underlying technology cannot be implemented there.

Do you need to support Android?

Android doesn’t support SVG, so you’ll have to use Paper.js or Processing.js. Some rumors say that Android 4 will handle SVG, but the majority of Android devices won’t support it for years.

Is your drawing interactive?

Raphaël and Paper.js focus on interaction with drawn elements through clicking, dragging and touch. Processing.js doesn’t support any object-level events, so responding to user gestures is very difficult. Processing.js can draw a cool animation on your home page, but the other tools are better for interactive applications.

Paper.js, Processing.js and Raphaël are the leading libraries for drawing on the Web right now. A couple of others are up and coming, and you can always use Flash, but these three work well with HTML5 and have the widest support among browser vendors.

Choosing the right framework will determine the success of your project. This article covers the advantages and disadvantages of each, and the information you need to make the best choice.

All of the code in this article is open source and can be run on the demo page that accompanies this article.

[Note: Have you already pre-ordered your copy of our Printed Smashing Book #3? The book is a professional guide on how to redesign websites and it also introduces a whole new mindset for progressive Web design, written by experts in the industry for you. Pre-order now and add your name into the book!]

Overview

| Paper.js | Processing.js | Raphaël.js |:——–:|:————-:|:———-: Technology | canvas tag | canvas tag | SVG Language | PaperScript | Processing script | JavaScript Browsers | IE 9 | IE 9 | IE 7 Mobile | Yes | Yes | iOS only Model | Vector and raster | Raster | Vector Size | 56 KB | 64 KB | 20 KB

It’s all JavaScript once the page runs, but the frameworks take different paths to get there. Raphaël is written directly in JavaScript, but Paper.js uses PaperScript, and Processing.js uses its own script. They all support Firefox, Chrome and Safari, but Internet Explorer is an issue — Paper.js and Processing.js use the canvas tag and thus require IE 9.

PaperScript is a JavaScript extension that makes it possible to write scripts that don’t pollute the global namespace. This cuts down on JavaScript conflicts. PaperScript also supports direct math on objects such as Point and Size: you can add two points together as if they were numbers.

Processing.js is based on a framework named Processing, which runs in the Java Virtual Machine. You define int and float instead of var, and you can use classes with Java-style inheritance. While the Processing.js script looks a little like Java, it’s more like JavaScript and doesn’t require many of the more complex features of Java. Using all three libraries is easy if you have some familiarity with JavaScript.

Full article could be found from Zack Grossbart’s Web-Drawing Throwdown: Paper.js Vs. Processing.js Vs. Raphael

with demos http://zgrossbart.github.com/3gears/

Comments