HTML5 canvas with processing and pure Javascript

Question

I have a data visualization animation that I want to make in the webapp that I have, and am considering various alternatives that I have. Basically it will just move around the text lines.

I use the Mootools structure and the Mootools FX library basically has the material you need, but I want to manipulate about 100 text lines, which means that each line will need a separate FX object (I think).

An alternative to this is to encode the entire object in the Processing section and use Processing.js to display it on HTML5 canvas.

Which of these things is easiest to use in a browser (I don’t want the site to be heavy on the client side)? Are there other ways that could be even better?

Answer 1

Or use client SVG. It should have no problems displaying and managing 100 text strings and is supported in many browsers such as Canvas (and IE supports VML, which provides similar functionality).

@austin, Apache Batik is server side SVG rendering.

Answer 2

I would not accept to support the canvas element at this time, since only the newest version of most browsers supports it. I would wait for support to be distributed, which may take some time. Keep in mind that HTML5 is not yet standard and is still subject to change.

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

Answer 3

Processing is just Java, by the way, so you should just write it in this and display it in the applet.

Answer 4

Why not actioncript 3, at the moment there is a wider penetration of the flash player than html 5 support.