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

Compare the code for Paper, Processing, and Raphaël. We'll start by drawing a simple circle.

Each framework creates animated drawings. Click the squares to make them spin.

The frameworks also handle interactions. Click or touch a square to change its color.

Now we'll put it all together with more complex shapes and create gears. Click the images to watch the gears run.

Paper

view source view source view source

Processing

view source view source view source

Raphaël

view source
view source
view source

by Zack Grossbart

Fork me on GitHub