使用画布来实现响应动画背景？

Question

我正在构建一个网站，我需要将其分成两行，一面保持固定，这是我的画布动画，另一面是滚动，这是所有信息的所在。

我的设置是这样的：

<div class="left-canvas-box"><!-- form/content--></div>
<canvas></canvas>
<div class="right-scroll-content"><!-- information content --> </div>

我正在使用<canvas></canvas>来z-index: -1;来实现背景效果，但每当我尝试响应它以便divs叠加在一起时，它只显示一个或者另外，白色div或＆＃39; clear＆＃39;格。

（小提琴有完整的代码）

小提琴： http://jsfiddle.net/dLu3qkor/4/

在手机大小的查询中使用此代码只会使右侧内容保持静态且不可滚动。

.left-canvas-box, .right-scroll-content{
width: 100%;
float: none;
display: block;
}

感谢您的帮助！