为教育工具创建一个循序渐进的HTML5/Javascript图形

我正在用HTML5和Javascript创建一个教育工具，帮助用户理解投票算法是如何工作的。我将通过绘制一些图形或动画来逐步完成每一步。我基本上是在创建以下内容的HTML版本：

---

你知道我该怎么做吗？我一直在尝试各种画布软件包，这些软件包可以绘制图形和其他东西，但对逐步完成教程没有任何帮助。

实际上，您想要做的是根据单击按钮或其他HTML元素来更改某些HTML元素的内容

你真的不需要使用画布。当然，如果你真的想让每件事都以缓慢延伸的线条为动画，那么使用画布会让事情变得容易得多

在使用Javascript时，您可以创建包含所需数据的隐藏元素，并在有人单击某个按钮时显示这些元素（可以是，但不必在其他隐藏元素中）

---

如果你真的想使用Canvas，我建议你看看这是一个基于向量的Canvas库，它可以在你的链接中创建类似于flash工具的结果。使用它非常简单，并且有一个（小）wiki解释基本内容。

这个问题太宽泛了。