使用多个画布＆amp;上下文

Question

我希望能够以这样的方式同步多个画布元素：当滚动一个时，所有其他画布元素也会滚动。 但是，它只是我想要同步的滚动。每个canvas-element仍然需要显示其独特的内容。

我已经包含了我正在制作的javascript-application的粗略草图：

http://i65.tinypic.com/311l829.png

• 每个canvas-element都显示一组独特的测量值。
• HTML按钮切换每个canvas-element上的特定图形。
• 如果任何canvas-element中的数据超出范围，则必须显示滚动条，并允许用户滚动图表。 无论使用哪个滚动条，所有canvas-element都应相应滚动。

几乎所有的功能都已实现并且有效，但是当我尝试添加多个canvas-elements时，它出错了。

注意：启动CanvasChart的初始函数：

var setCanvasContext = function (canvasName) {
    canvas = document.getElementById(canvasName);
    ctx = canvas.getContext("2d");       
}

var initializeCanvas = function (canvasId, dataObj) {        

    setCanvasContext(canvasId);           
    ...                  
};

其余的javascript就在这个jsfiddle中：

https://jsfiddle.net/ahkemc7k/

• 该程序由调用的函数 GetData（）启动 generatePageElements（），它依次创建必要的HTML，最后调用 CanvasChart.initializeCanvas（canvasId，dataObject） 使用它刚刚创建的画布的id。
• app.draw（）是处理重绘/更新的函数 canvas，初始化函数运行一次后。

我还是javascript的新手，并且不了解所有的细节或酷炫的技巧和编码风格。

到目前为止我认为我知道的事情：

目前，我可以一次操作1个画布。这是因为我一次只处理一个上下文 对我来说，我需要重构代码以及函数如何相互调用。

• 我是否需要将所有上下文保存在一个对象中并循环播放 每当我进行影响所有画布的平局时，它们都会出现？
• 我应该在＆＃34;主控制器＆＃34;上应用一些设计模式？那 处理各种画布如何＆＃39;元素滚动？
• 我应该创建一组单独的方法来处理更新canvas元素之间的滚动坐标吗？

我不擅长提问，所以请告诉我是否需要改写或添加内容。