Create a step by step click through HTML5/Javascript graphics for an education tool

I am creating an educational tool in HTML5 and Javascript to help users understand how voting algorithms work. I will be stepping through each step by diplaying some sort of graphics or animation. I am essentially creating an HTML version of this:

Any ideas how i could go about doing this? I have been experimenting with various Canvas packages which draw graphs and stuff but nothing that would help to step through an tutorial.


In essence what you want to do is to change the content of some HTML element based on clicks on buttons or other HTMLelements.

You don't really need to use a Canvas for that. Of course, if you want to really make everything animated with lines slowly extending etc, using Canvas makes things a lot easier.

When just using Javascript you could create hidden elements with your desired data in them, and show them when somebody clicked on a certain button(wich could be, but doesn't have to be inside one of the other hidden elements).

If you réally want to use Canvas, I suggest you to look at Cake.js This is a Vector-based Canvas Library, wich could create results similar to the flash tool in your link. To use it is pretty straightforward, and there is a (small) wiki explaining the basic things.

Need Your Help

RTMP stream on iOS

iphone ios video live rtmp

I have to make an iOS app which plays a live video stream from a camera. I know that the iPhone only supports Live HTTP stream, but unfortunately it comes with a delay of about 6-10 seconds, which ...