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

Advertisement

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

  1. 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.
  2. 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.
  3. 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.

.toc {
width: 100%;
margin: 1em 0;
border: 1px solid rgba(0,0,0,0.1); }
.toc td, .toc th {
padding: 4px 10px;
border-bottom: 1px solid #eee;
border-right: 1px solid #eee;
border-collapse: collapse;
text-align: left;
}
.toc th {
background-color: #ECECEC;
}

Overview

Paper.js Processing.js Raphaël
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.

Getting Started

Start by importing each library. The process for setting each up is a little different.

Setting Up Paper.js

<head>
<script src="paper.js" type="text/javascript" charset="utf-8"></script>
<script type="text/paperscript" canvas="paperCircle" src="paper_circle.pjs" id="script"></script>
</head>
<body>
<canvas id="paperCircle" class="canvas" width="200" height="200" style="background-color: white;"></canvas>

Paper.js specifies a script type of text/paperscript and the ID of the canvas tag that you’ll draw on. It uses that ID to know where to draw.

Setting Up Processing.js

<head>
<script src="processing.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<canvas width="200" height="200" class="canvas" data-processing-sources="processing_circle.java"></canvas>

Processing.js uses the data-processing-sources attribute of the canvas tag to import your drawing. I use a .java extension for Processing’s source file so that my editor color-codes it properly. Some authors use a .pde or .pjs extension. It’s up to you.

Setting Up Raphaël

<head>
<script src="raphael-min.js" type="text/javascript" charset="utf-8"></script>
<script src="raphael_circle.js" type="text/javascript" charset="utf-8"></script>
</head>

Raphaël is imported like any other JavaScript file. It works well with jQuery’s ready function or any other JavaScript framework.

Now we can start drawing.

Object-Oriented Drawing

Both Paper.js and Raphaël use object-oriented drawing: you draw a circle and get back a circle object. Processing.js draws the circle and doesn’t give you anything back. The following simple example makes it clear. Let’s start with a circle in the middle of the screen at point 100,100.

Paper.js:

var circle = new Path.Circle(new Point(100, 100), 10);
circle.fillColor = '#ee2a33';

Raphaël:

var paper = Raphael('raphaelCircle', 200, 200);
var c = paper.ellipse(100, 100, 10, 10);
c.attr({'fill': '#00aeef', 'stroke': '#00aeef'});

Processing.js:

void setup() {
   size(200, 200);
}

void draw() {
   background(#ffffff);
   translate(100, 100);
   fill(#52b755);
   noStroke();
   ellipse(0, 0, 20, 20);
}

Each code snippet draws the same circle. The difference is in what you can do with it.

Paper.js creates the circle as a path object. We can hold onto the object and change it later. In Paper.js, circle.fillColor = 'red'; fills our circle with red, and circle.scale(2) makes it twice as big.

Raphaël follows Paper.js’ object-oriented model. In Raphaël, we can change the color of our circle with circle.attr('fill', 'red');, and scale it up with circle.scale(2, 2);. The point is that the circle is an object that we can work with later.

Processing.js doesn’t use objects; the ellipse function doesn’t return anything. Once we’ve drawn our circle in Processing.js, it’s part of the rendered image, like ink on a page; it’s not a separate object that can be changed by modifying a property. To change the color, we have to draw a new circle directly on top of the old one.

When we call fill, it changes the fill color for every object we draw thereafter. After we call translate and fill, every shape will be filled with green.

Because functions change everything, we can easily end up with unwanted side effects. Call a harmless function, and suddenly everything is green! Processing.js provides the pushMatrix and popMatrix functions to isolate changes, but you have to remember to call them.

Processing.js’ no-objects philosophy means that complex drawings run faster. Paper.js and Raphaël contain references to everything you draw, and so the memory overhead created by complex animations will slow down your application. Processing.js contains no references to drawn elements, so each shape takes up a tiny amount of memory. Memory overhead pays off if you need to access an object later, but it’s overkill if you don’t. Paper.js gives you a way out of this with the Symbol object and by rasterizing objects, but you have to plan ahead to keep the app running fast.

The object-oriented versus no-objects philosophy has implications for everything you do with these libraries. It shapes the way each library handles animations.

Let’s Make It Move

Rotating circles aren’t very interesting, so we’ll make a square rotate around a circle.

Animation in Processing.js

Processing.js supports animation with the predefined setup and draw functions, like this:

float angle = 0.0;
void setup() {
   size(200, 200);
   frameRate(30);
}

void draw() {
   background(#ffffff);
   translate(100, 100);
   fill(#52b755);
   noStroke();
   ellipse(0, 0, 20, 20);

   rotate(angle);
   angle += 0.1;
   noFill();
   stroke(#52b755);
   strokeWeight(2);
   rect(-40, -40, 80, 80);
}

The setup function is called once when the application starts. We tell Processing.js to animate with a frame rate of 30 frames per second, so our draw function will be called 30 times every second. That rate might sound high, but it’s normal for making an animation look smooth.

The draw function starts by filling in the background of the canvas; it paints over anything left over from previous invocations of the draw function. This is a major difference with Processing.js: we are not manipulating objects, so we always have to clean up previously drawn shapes.

Next, we translate the coordinate system to the 100,100 point. This positions the drawing at 100 pixels from the left and 100 pixels from the top of the canvas for every drawing until we reset the coordinates. Then, we rotate by the specified angle. The angle increases with every draw, which makes the square spin around. The last step is to draw a square using the fill and rect functions.

The rotate function in Processing.js normally takes radians instead of degrees. That’s why we increase the angle of each frame by 0.2, rather than a higher number such as 3. This is one of many times when trigonometry shows up in this method of drawing.

Animation in Paper.js

Paper.js makes this simple animation easier than in Processing.js, with a persistent rectangle object:

var r;

function init() {
   var c = new Path.Circle(new Point(100, 100), 10);
   c.fillColor = '#ee2a33';

   var point = new Point(60, 60);
   var size = new Size(80, 80);
   var rectangle = new Rectangle(point, size);
   r = new Path.Rectangle(rectangle);
   r.strokeColor = '#ee2a33';
   r.strokeWidth = 2;
}

function onFrame(event) {
   r.rotate(3);
}

init();

We maintain the state of our square as an object, and Paper.js handles drawing it on the screen. We rotate it a little for each frame. Paper.js manages the path, so we don’t have to redraw everything for each frame or keep track of the angle of rotation or worry about affecting other objects.

Animation in Raphaël

Animations in Raphaël are written in standard JavaScript, so Raphaël doesn’t have specific functions for handling animation frames. Instead, we rely on JavaScript’s setInterval function.

var paper = Raphael('raphaelAnimation', 200, 200);
var c = paper.ellipse(100, 100, 10, 10);
c.attr({
   'fill': '#00aeef',
   'stroke': '#00aeef'
});

var r = paper.rect(60, 60, 80, 80);
r.attr({
   'stroke-width': 2,
   'stroke': '#00aeef'
});

setInterval(function() {
   r.rotate(6);
}, 33);

Raphaël is similar to Paper.js in its object-oriented approach. We have a square, and we call a rotate function on it. Thus, we can easily spin the square with a small amount of code.

Interaction

Raphaël shines when you need to enable interactivity in a drawing. It provides an event model similar to JavaScript’s, making it easy to detect clicks, drags and touches. Let’s make our square clickable.

Interactions With Raphaël

var paper = Raphael('raphaelInteraction', 200, 200);
var r = paper.rect(60, 60, 80, 80);
r.attr({'fill': '#00aeef', 'stroke': '#00aeef'});

var clicked = false;

r.click(function() {
   if (clicked) {
      r.attr({'fill': '#00aeef', 'stroke': '#00aeef'});
   } else {
      r.attr({'fill': '#f00ff0', 'stroke': '#f00ff0'});
   }
   clicked = !clicked;
});

The click function in Raphaël works like jQuery, and you can add it to any object. Once we get the click event, changing the color of the square is easy. Raphaël has more functions to support dragging, hovering and all of the other user interactions you expect from JavaScript.

Interactions With Paper.js

Paper.js has a different way of managing interactions, but it’s still pretty easy:

var hitOptions = {
   fill: true,
   tolerance: 5
};

function init() {
   var point = new Point(60, 60);
   var size = new Size(80, 80);
   var rectangle = new Rectangle(point, size);
   r = new Path.Rectangle(rectangle);
   r.fillColor = '#ee2a33';
}

function onMouseUp(event) {
   var hitResult = project.hitTest(event.point, hitOptions);

   if (hitResult && hitResult.item) {
      if (hitResult.item.clicked) {
         hitResult.item.fillColor = '#ee2a33';
      } else {
         hitResult.item.fillColor = '#f00ff0';
      }

      hitResult.item.clicked = !hitResult.item.clicked;
   }
}

init();

Paper.js deals with mouse gestures through a concept called “hit testing.” A hit finds the point under the mouse cursor and figures out which object it lies above. Hit options enable you to define how the hit works: you can set options for such things as how close the mouse has to be, and whether the middle of the object counts or only the edge. We can extend this hit test to any object or group of objects in Paper.js.

The Paper.js team added object-level events similar to Raphaël’s a few weeks ago. The events should show up in the next release.

Interactions With Processing.js

Processing.js makes detecting mouse clicks tricky. It doesn’t support object-level events or hit testing, so we’re pretty much on our own.

float bx;
float by;
int bs = 20;
boolean bover = false;
boolean clicked = false;

void setup() {
   size(200, 200);
   bx = width/2.0;
   by = height/2.0;
   noStroke();
   fill(#52b755);
   frameRate(10);
}

void draw() {
   background(#ffffff);

   // Test if the cursor is over the box
   if (mouseX > bx-bs && mouseX < bx+bs &&        mouseY > by-bs && mouseY < by+bs) {
      bover = true;
   } else {
      bover = false;
   }

   translate(100, 100);
   rect(-40, -40, 80, 80);
}

void mousePressed() {
   if (bover) {
      if (clicked) {
         fill(#52b755);
      } else {
         fill(#f00ff0);
      }
      clicked = !clicked;
   }
}

Once Processing.js draws the square, it forgets about it. We want the color of the square to change when we click on it, but the script doesn’t know that, so we have to do all of the calculations ourselves. The draw function detects the mouse cursor’s position and does the math to determine whether it lies within the square.

The code is not too bad for the square, but our circle would need pr2. And more complex shapes such as ovals, curves and compound shapes would require even more math.

No Clear Winner

Each framework has its advantages. Between them, the features make for cool demos and even cooler applications.

Showing Off Paper.js

Paper.js excels at manipulating complex shapes. It can turn, twist and transform any object in hundreds of ways. These transforms make it easy to convert objects based on interactive gestures. The new Google Music Tour, which makes colored lines beat in time to music, shows how one can make complex changes on simple shapes.

The other wow factor in Paper.js is its support of raster graphics. Paper.js can completely change the way images are drawn — including by turning them into spirals and Q*bert boards.

Showing Off Processing.js

Processing.js’ biggest feature is speed, making it possible to draw complex animations on slower machines. Many examples are out there, but the fluidity of Processing.js animations shows up best in Ricardo Sánchez’s koi pond.

The swishing of the tails and waving of the bodies make the koi look very natural. Processing.js makes this easy, with support for curves and customized animations.

Processing.js also supports complex drawing elements such as shading, lighting and 3-D transforms. If you want to create complex animations in canvas very quickly, then Processing.js is the clear winner.

Showing Off Raphaël

The best feature of Raphaël is its support for Internet Explorer 7 and 8. If your application has to run on older browsers, then Raphaël is the only option.

The other big feature of Raphaël is its community. Raphaël is older than Paper.js and Processing.js and thus has had more time to build examples, tutorials and user support. It has built-in support for easing, animation transforms and the event handlers that we saw in the interaction example; it also has a comprehensive charting library.

Raphaël also has the best tooling support.

The Tools

If you’ve worked with Flash, the lack of tools for these frameworks will disappoint you. Many of the frameworks will edit SVG images, but none of them offer a drag-and-drop method for creating applications.

A few simple tools are out there, but they are more like proofs of concept than actual products. Adobe is working on a tool named Edge, but it has a long way to go.

If you want to drag and drop, then Web animations aren’t for you yet. Right now, this method of drawing is more like video-game programming. Writing code to draw a circle is tougher than clicking and dragging, but it scales to more complex applications and some fun stuff.

Let’s Build Something Real

So far, we’ve looked at some simple examples, seen the best features of each platform and looked at how to choose the right one. Each framework has pluses and minuses, but judging them is difficult until you create an actual application.

To compare each framework, I’ve drawn some gears. Each gear is made up of two circles, with a set of teeth around the outer circle.

When the shapes are all given the same color, they look just like a gear.

Every gear will rotate a little with each frame of the animation. The first gear will be given a speed, and the rest will move relative to it. The gears will arrange, mesh and rotate together with a crazy amount of trigonometry. Put them together and you’ve got a complex gear system.

Paper.js:

Processing.js:

Raphaël:

Well, that wasn’t quite Raphaël. The rotate function work different in Raphaël than it does in Paper.js and Processing.js. Raphaël doesn’t support rotation around a fixed point. Instead, the teeth of the gears are drawn and redrawn independently, and they fly through the air instead of rotating around the center. The only way to really turn the gear would be to draw the entire gear as a single path, and that takes more math than I’m willing to write. If anyone wants to give it a try, everything is open source.

The Future Of Web Drawing

We gamble on every new technology that we learn: we hope that it catches on and that our investment pays off. Technologies rise and fall on their respective merits, but other factors comes into play, such as vendor support and business uses. The future of our industry is almost a guessing game.

Right now, Flash looks like a bad investment. Flash has great tools, years of development and a large community, but even Adobe is moving away from it.

SVG is in a similar situation. Browsers support it now, but it isn’t getting a lot of attention.

Every browser vendor is working hard to render canvas faster, to use hardware acceleration and to better support libraries such as Paper.js and Processing.js. All mobile devices support canvas, and their developers are working to improve it.

Update

After hearing from a few Raphaël fans Dmitry Baranovskiy the creator of the framework took a look and showed me what I was missing to make the gears rotate in Raphaël. Check out the rotating gears in Raphaël.

(al)

↑ Back to top

Zack Grossbart is an engineer, designer, and author. He's a founding member of the Spiffy UI project, the architect of the WordPress Editorial Calendar, and a Consulting Engineer with NetIQ. Zack began loading DOS from a floppy disk when he was five years old. He first worked professionally with computers when he was 15 and started his first software company when he was 16. Zack lives in Cambridge, Massachusetts with his wife and daughter.

  1. 1

    Great tutorial…very informative.

    0
  2. 2

    processing.js also supports 100% javascript, not only processing ‘script’ as you named it

    0
  3. 3

    Zack, I just performed a rotation of a path with Raphael along a center point. I’m sorry to you are wrong about this. See the reference

    You can use a *set* to group your paths, and then apply the rotation to this set. Tada, your gear is rotated.

    0
    • 4

      I’d love to see the gears work in Raphael. I tried using sets and contacted a few other people and couldn’t get it working. If you know how to make it work please share the code.

      Thanks,
      Zack

      0
    • 6

      While you can rotate around a point with Raphael, it is not accurate in IE/VML for some reason. You can see this clearly if you look at Dmitry’s fork and make the gear components partial transparent.

      0
  4. 7

    Also, the assumption “Android does not support SVG” may be incorrect.
    This answer on SO points out that android browser renders SVG correctly at least after v3.2.

    And there are other browser on the Android market than the default one.

    0
    • 8

      Android 3.x is for Tablets only. The 4.0 browser natively supports SVG (I have personally verified this while writing this post.), both in the bundled browser and in Android Chrome.

      There is no plan for 2.x phones to get SVG support in the default browser. However, Firefox Mobile does support SVG (again, verified), so it is possible to serve SVG up to older android phones… if you can convince people to install firefox. (it is a great browser, on-par with Chrome, which isn’t available for 2.x)

      0
      • 9

        I have had no difficulty in getting an SVG inside a PShape to show up on my Android 2.3 using WebView. Tested out with primitive shapes and they worked as expected.

        @Zack, thank you very much for your time to research and compile this, very helpful.

        0
    • 10

      I too, can verify that SVG renders properly on Android 3.2. The issue is when you introduce animations things can get a bit hairy. I created an Android app that embedded jQuerySVG scripts in an Android Web View. In the end it worked but there was a lot of optimizations that needed to be made.

      0
      • 11

        It is so, so confusing. Your diucsssion is fascinating, however, especially for someone who has been told equally vehemently that her child does have SPD and does not have ASD yet by others the opposite message…

        0
  5. 12

    I’m not sure I agree with your statement that SVG is going the same way as Flash – could you provide any references to back this up?

    I believe the browser vendors are also trying to speed up SVG rendering using hardware acceleration see (MSIE blog) from March last year.

    Android 3 Webkit has SVG support – although I think this version was mainly for tablets – don’t forget that that there are many more mobile Webkits than just Android see:

    This article by KendoUI has some useful info on how to support Android 2.x and SVG.

    In the past I’ve used Abobe Illustrator to edit svg images.

    Just my 2p :o)

    0
  6. 13

    Jean-Philippe Encausse

    February 22, 2012 6:30 am

    What about D3 which show really amazing chart, graph, drawing and interraction ?

    0
  7. 16

    Mike "Pomax" Kamermans

    February 22, 2012 6:33 am

    Your article kind of makes it sound like Processing.js can’t do interactive objects, even though it can. While your code in the “we have to make our own” section works, it’s also an example of “not processing code”, because it ignores the fact that we *have* proper object oriented programming available, which means we can write an interactive object that we can reuse in other programs, and doesn’t require any code in the main program to do its thing, just like Paper.js and Rafael.js’ built in objects. Only more powerful:

    MyBox mybox;
    void setup() {
    size(200,200);
    mybox = new MyBox(75,75,50,50);
    }

    void draw() {
    background(255);
    mybox.draw();
    }

    void mousePressed() {
    if(mybox.over(mouseX, mouseY)) {
    mybox.setColor(color(#0000ff));
    }
    }

    void mouseReleased() {
    if(mybox.over(mouseX, mouseY)) {
    mybox.setColor(color(#ff0000));
    }
    }

    class MyBox {
    int x,y,w,h;
    MyBox(int _x, int _y, int _w, int _h) {
    x=_x; y=_y; w=_w; h=_h;
    }
    color fcolor = color(#FF0000);
    void draw() {
    fill(fcolor);
    rect(x,y,w,h);
    }
    boolean over(int mx, int my) {
    return x<=mx && mx<=x+w && y<=my && my<=y+h;
    }
    void setColor(color newcolor) {
    fcolor = newcolor;
    }
    }

    Now, your Processing program suddenly does have interactive objects. It doesn't come with any of them out of the box, because the trivial ones are trivial to add, and the ones you really need are never there. Object oriented programming lets you quickly define your own, and write things well beyond "ellipse" and "rect" and more like "mario sprite" and "data cluster" =)

    0
    • 17

      yes processing.js (and processing) for the win :)

      0
    • 18

      Thanks for the awesome code example. The key is the over function:

      boolean over(int mx, int my) {
      return x<=mx && mx<=x+w && y<=my && my<=y+h;
      }

      This function is trivial to write for a square or rectangle, but it gets pretty tough with complex objects like arcs, stars, fish, and other more complicated shapes. The key here is that Paper can do that calculation for you and with Processing you're on your own.

      Thanks,
      Zack

      0
      • 19

        Must admit my only experience of Processing is from the Java based version… Anyway it’s true that hit-testing etc. can get difficult on complex shapes (you might be better off relying on dedicated libraries (though hit tests on a circle are particularly trivial)); but Processing is a great way to learn the foundations of OOP. As Mike says: the whole point of Processing is that you write your own objects that do exactly what you need them to do: no more or less. That should lead to more efficient code at the cost of some added complexity; but then it’s that challenge that helps you learn better coding in the long run ;)
        Oh – and having to write your own hit detection routines means you get to learn a whole bunch of really useful maths :)

        0
  8. 20

    The ExplorerCanvas (excanvas, project adds support as far back as IE6 believe it or not.

    0
  9. 21

    Interesting article, however I have to say there is a big hole, as there is no mention about d3.js which would probably be my tool of choice when creating interactive infographics.

    0
    • 22

      The end of article states “We gamble on every new technology that we learn: we hope that it catches on and that our investment pays off.” I can’t see how investing time in learning to animate by coding is anything but a horrible gamble. A tool that allows you to draw with the control of Illustrator and then animate in a visual time line based environment will be so superior to the methods mentioned in this article as to render them useless. I’m going to have to wait for that kind of tool. I can’t charge clients for days of programming every time we need something on a page to move.

      0
  10. 23

    Great attempt to break down the variables that go into making this decision! It would turn into a mess if you tried to account for every thing and this is a pretty good compilation of where things are at.
    I think there were some aspects of Processing.js that were a little misrepresented though, like how easy it is to use in pure-javascript, rather than using the java-syntax which is primarily there for people making the switch. Seems like the Canvas 2D Rendering Context on its own deserved a mention also.

    This library (that I maintain) can be used with any of the above libraries and is a good solution to the problems proposed in the “Interactions with Processing.js” section and what you refer to as “object-level hit-testing,” this can be easily accomplished: ” var isHit = myPolygon.containsPoint(pt);” and provides a lot of geometry-related functionality (among other things) that these libraries do not offer.

    Thanks for your help in making these decisions more approachable!

    – Kyle

    0
  11. 24

    More options:

    EaselJS: developed by ex-flash developers while working on Pirates Love Daisies… competes with Paper.

    PL-Retained: A slightly more bare-bones library, gives you the basics. (plus, they have a great QR code generator)

    0
  12. 25

    the mobile story for Raphael isn’t iOS only… it works on Windows Phone, too

    0
  13. 26

    Does anyone have an opinion on Fabric.js? Exporting to SVG is key for a project I’m working on. Looking at Fabric vs Raphael at the moment.

    0
    • 27

      Christopher Bousquet

      March 12, 2012 10:08 am

      I started a project in Raphael that I immediately switched to Fabric.js after roughly 3 days of wrestling. Why? The app I am building required a lot of user interaction which I just found to be simpler through Fabric. The last straw for me was in rotating a draggable object. There’s just so much to work around for even the simplest interactions, that after delving through Fabric, it became a no brainer to switch.

      I absolutely recommend Fabric above the others.

      0
  14. 28

    I would love to actually use some of this, but most of my work requires more complex shapes–stuff that would be difficult to create by hand-coding. I’d like a GUI tool to create these shapes and maybe even the interactive bits.

    How about Adobe Flash (the program that makes flash animations) having an option to export to javascript/Canvas or SVG animation? Or maybe even Microsoft Expression could do this. (XAML -> Canvas/SWF/JavaScript converter anyone?)

    Sounds like a Win-Win to me–Adobe (or Microsoft) gets to keep a flagship product around (regardless of the .swf format going away–and silverlight never really taking off) and designers get a tool that lets them make things that work on devices without a plugin.

    0
    • 29

      Dmitry Baranovskiy

      February 22, 2012 4:54 pm

      You can grab any* vector image, open it in Illustrator or Inkscape, export as SVG and then copy/paste it into your code. This way you don’t have to code complex paths by hand. Look at these icons for example

      0
  15. 30

    Great article!

    But you missed the most important JavaScript framework today, for the visualization community: D3!

    It easily outsmarts all of the 3 presented here, which is no easy feast, since Processing is really really really good!

    Best regards!

    0
  16. 31

    Dmitry Baranovskiy

    February 22, 2012 4:52 pm

    Let me just fix couple of mistakes here:
    “Raphaël even has some support for IE 6, although some of its underlying technology cannot be implemented there.”

    Raphaël supports IE6 as well as it supports IE7 and IE8. What “underlying technology” you was talking about?

    “var c = paper.ellipse(100, 100, 10, 10);
    c.attr({‘fill’: ‘#00aeef’, ‘stroke’: ‘#00aeef’});”

    There is circle() method and you don’t need to set the stroke to the same colour:
    var c = paper.circle(100, 100, 10).attr({stroke: “none”, fill: “#00aeef”});

    “Raphaël doesn’t have specific functions for handling animation frames…”

    First of all it does have, but actually you don’t need them for this example because you could simply animate transform attribute. Raphaël has very powerful animation API.

    “Raphaël doesn’t support rotation around a fixed point.”

    It does support that. It supports any transformation, in fact it’s transformation API is more flexible than SVG or canvas. Your “impossible” gear is spinning here:

    I hope your review of other libraries is more valid.

    0
  17. 32

    Hey Guys,

    Dmitry Baranovskiy worked out a solution to make the gears rotate in Raphael. We’re working out a couple of issues and I’m hoping I can take the change into my sample page soon.

    -Zack

    0
  18. 33

    Tim from IntuitionHQ

    February 22, 2012 6:10 pm

    Not sure if Android does not support SVG. But it was a great article. Thanks.

    0
  19. 34

    If you want your user to be able to download a copy of the image you’ve rendered as a vector graphic, you have to use Raphael (and only in (not IE)).

    0
  20. 35

    Nice descriptive article.According your requirement you have to choose which one among these thee Paper.js , Processing.js and. Raphael will be best.

    0
  21. 36

    Additionally, with a bit of hacking you can get raphael (when it uses SVG) to honor CSS stylesheets. This is huge if you have an application where you want to have ‘sensible defaults’ but also allow users to customize look and feel.

    0
  22. 37

    Really great article, I have been looking into this recently and it has helped immensely. I found some others like KineticJS, three.js (3D canvas drawing) and tween.js but this review of the big three has helped me approach it on a project-by-project basis rather than simply picking one.

    0
  23. 38

    Outstanding article, very informative and you have taken the pain to actually study all three models and lay that out in a simple format for others to digest

    Kudos!!

    0
  24. 39

    Again, why did you left D3 out?

    We all know it’s the best library.

    Also your review does not include three.js and some other libraries that mostly deal with 3D like X3DOM.

    0
  25. 40

    I’m not trying to start any trouble, but I just don’t understand the purpose of using this. For instance, why would I spend all that time creating a graph in the canvas and with js when I could just use a jpeg/png/gif…? This just doesn’t seem practical to me.

    0
  26. 42

    Another vote for D3!

    I’ve even used it without SVG, manipulating plain old HTML elements instead. How’s that for cross-browser?

    0
  27. 43

    Hi, thx for the great article . I prefer canvas because now I am working on a library called InputCanvas which creates custom inputs inside a canvas including text input .. I think that would be too difficult working with SVG , actually It would be useless !!

    0
  28. 44

    Browsers IE 9 IE 9 IE 7 should be corrected to IE 9 IE 9 IE 6

    0
  29. 45

    My comment is more of seeking some help here.

    So using paper.js, I drew a circular segment as

    var arcOne = createSegment(‘green’);

    //Create Each segment
    function createSegment(fillcolor){
    //Segment One
    var start = new Point(view.center.x, view.center.y-130);
    var through = new Point(view.center.x-90, view.center.y-94);
    var to = new Point(view.center.x-113, view.center.y-64);
    var name = Path.Arc(start, through, to);

    name.add(new Point(view.center.x, view.center.y));
    name.add(new Point(view.center.x, view.center.y-130));
    name.fillColor = fillcolor;
    name.strokeColor = ‘black’;

    return name;
    }

    //and then tried to detect a click event as the one you’ve provided,

    var hitOptions = {
    fill: true,
    tolerance: 5
    };

    function onMouseUp(event) {
    var hitResult = project.hitTest(event.point, hitOptions);
    console.log(hitResult);
    if (hitResult && hitResult.item) {
    if (hitResult.item.clicked) {
    hitResult.item.fillColor = ‘#ee2a33′;
    } else {
    hitResult.item.fillColor = ‘#f00ff0′;
    }

    hitResult.item.clicked = !hitResult.item.clicked;
    }
    }

    The “console.log(hitResult);” in the “onMouseUp”event returns a “null”. Why is it that so?

    0
  30. 46

    Huh? Flash bad investment. Guess what type of developer has already developped some skills and best practices in this area and is now developing this kind of possibilities. And second, what about 3d and hardware acceleration. Please look at them as two members of the same family!

    0
  31. 47

    I recommend people to start using Canvas from scratch.
    I mean it’s not so hard, and it’s a common drawing API everyone should know :)
    There is a long way to go just with it :)

    For instance, I have just bootstrapped this in a few time without any library.

    When you will start to mastery the Canvas API, you will see some patterns, and you will need some tools like Paper.js to factorize your codes.

    You know it’s like for 3D development: it’s recommended to learn strong basics, how graphic card handle things to know the best what to do with a higher level library (like Three.js) and optimize your codes. That’s what a WebGL library author recently said to me :)

    0
  32. 48

    Interesting article. I don’t have an immediate need for such a framework, but I love some of the demos out there; the work of some people is inspiring and amazing.

    No doubt that speed was a specific design decision for Processing.js, but it would perhaps be nice to have the option to return the object. It would then be a decision for the developer; they would, by default, have speed as a priority, but could also choose to have some objects returned if they needed.

    0
  33. 49

    very sweet. Thanks for taking the time to post the step by step code for us non uber-geek civilians. what are some cool example websites using this?

    0
  34. 50

    We’ve successfully used Raphael on our site to render seating plans for theatres, stadiums. The speed is incredible we can render a 2000+ seat seating plan in a blink of an eye. With back dated support for old browsers Raphael was truly a way better choice than Flash, Silverlight or Canvas. The lack of support for Android was a sacrifice we’re willing to take. We found that users, use their devices in a applied manner, they would lookup information on mobile, but book using a browser.

    0
    • 51

      Have you tried it on Android’s 4.0.4 Browser? I would like to know it your app works there too.

      Thanks,

      pedro.

      0
  35. 52

    Nice article, but you didn’t mention Opera support (I hate it when this happens; it’s an ace, innovative browser and doesn’t deserve to be left off the list when talking about support – not least because it supports pretty much everything… nearly). Good article, though, as I say

    0
  36. 53

    I’ve just tried the three examples above (Gears) on my mobile with Android. The Browser was the one that comes with the mobile (which I updated in Feb 2012).

    Result:
    - Processing.js did not work
    - Raphael: worked and is impressively fast (even when working with the other one, Paper.js, on another tab)
    - Paper.js: worked but is quite slow

    I must say that I am very impressed with Raphael. I was inclined to use it for direct Javascript usage and wider support. I do like it better (I am a Javascript supporter) but I must say that I found the Paper.js syntax and “programming look & feel” better. After all Paperscript is also nothing more than Javascript Paper.js with some extra functionality that actually allow for cleaner and simpler code.

    Because I don’t need fast processing of complex images I will drop Processing.js. I haven’t decided on the other two though.

    Something just popped up in my mind: what about using both depending on what you want to do in your app or website? :)

    Technical note:
    - Mobile: Samsung Nexus S
    - OS: Android 4.0.4 (Kernel version 3.0.8-g6656123)
    - Browser: Android Browser v4.0.4-299849

    0
  37. 54

    I started drawing with Canvas but stopped after people with IE8/VMS tried to print browserpages. Lines that were correct on screen printed worse going down the page.

    Now using Raphael things speeded up and so far I have not been told about printing problems. More documentation than the reference on the main Raphael page would be welcome on my ‘level’.

    0
  38. 55

    Great article Zack, trying to figure out what graphics framework to use starting from “total noob” and this was xxxxxxxtremely helpful!

    0
  39. 56

    Great blog. A real time-saver. Great comparisons. Thanks a lot. :)

    0
  40. 57

    “rumors say that Android 4 will handle SVG, but the majority of Android devices won’t support it for years.”

    Well, it didn’t really take “years” to have the majority of android devices supporting SVG.

    So considerations about compatibility should be updated and Raphael is a good choice for most androids too.

    0
  41. 58

    Yes please add d3 , fabricjs, and svg.js to the comp running on jsfiddle as update to the post

    cheers

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top