HTML5 canvas with Processing vs. Pure Javascript

Question

I have some data visualization animations I want to do in a webapp I have and am considering different alternatives I have. It will basically just be moving around text strings in a pretty way.

I am using the Mootools framework and the Mootools FX library basically have the stuff i want, but I want to manipulate around 100 text strings, which means each string would need a separate FX object (I think).

The alternative to doing this is coding the entire thing in Processing and use Processing.js to render it to an HTML5 canvas.

Which of these things go easiest on the browser (I don't want the site to be client-side heavy)? Are there any other ways that might be even better?

Answer 1

Or use client-side SVG. It should have no problems displaying and manipulating 100 text strings, and is supported in much the same browsers as Canvas is (and IE supports VML, which provides similar functionality).

@austin, Apache Batik is a server-side SVG renderer.

Answer 2

I would not adopt for support of the canvas element at this time since only the newest version of most browsers support it. I would wait until support is common, which could take a little while. Keep in mind HTML5 is not a standard yet, and is still subject to change.

You might want to research SVG and see if there is a server side SVG parser where the output could be converted to PNG.

Answer 3

Processing is just Java, by the way, so you should be able to just write it in that and display it in an applet.

Answer 4

Why not actionscript 3, at this point there is a wider penetration of the flash player than support for html 5.