jquery - このキャンバス アニメーションの実行が途切れるのはなぜですか?

Question

画像のリロードが多すぎるか、ループにエラーがあると思いますが、これが初めてのキャンバス プロジェクトなので、呼び出しとメソッドの処理方法がわかりません。誰か私に手を貸してくれるか、少し説明してくれませんか?

ところで; サイト上でさまざまなパターンのこれらが必要なため、ベクトルが必要です。<canvas id="CSCanvas" width="2800" height="2000"></canvas>名前とベクトル位置が異なる animateC() 関数をさらに 3 つ使用し (それ以外は同じです) 、「wave」div 内で異なる canvases( ) を使用しています。これは正しい方法ですか？

JSDfiddle はまさにこの通りです。

そして、ここにスクリプトがあります..

$(document).ready(function(){

var offset = 0;
var offset2= 0;
var delta = 1;
var delta2 = .5;
var wavesCanvas = [ 'CCanvas', 'CSCanvas', 'SCanvas', 'SSCanvas' ];
var wavesIMG = ['wt1', 'shadow', 'wt2', 'shadow'];  

function animateC() {   
    var wavevar=0;
    var imgname=wavesIMG[wavevar];
    var canvasname=wavesCanvas[wavevar];
    var Ccanvas = document.getElementById(canvasname);
    var Ccontext = Ccanvas.getContext('2d');

    var pattern = new Image();
    pattern.onload = function(){
        Ccontext.clearRect(0,0,Ccanvas.width,Ccanvas.height);
        Ccontext.save();
        Ccontext.translate(-offset, 0);
        Ccontext.beginPath();
        Ccontext.moveTo(0, Ccanvas.height);
        Ccontext.lineTo(0, 0);
        var waux=120;
        for(i=0;i<50;i++){
            Ccontext.quadraticCurveTo(5+(waux*i), 0, (10+(waux*i)), 6);
            Ccontext.quadraticCurveTo((60+(waux*i)), 56, (120+(waux*i)), 6);
        }
        Ccontext.lineTo(Ccanvas.width, Ccanvas.height);
        Ccontext.closePath();
        var fillP = Ccontext.createPattern(pattern,'repeat');
        Ccontext.fillStyle = fillP;
        Ccontext.fill();
    };
    pattern.src= './images/'+imgname+'.png';
    Ccontext.restore();
    offset += delta;
    if (offset > 120) offset=0;
    requestAnimationFrame(animateC);
}


window.requestAnimationFrame = (function(){
  return window.requestAnimationFrame       ||
         window.webkitRequestAnimationFrame ||
         window.mozRequestAnimationFrame    ||
         function( callback ){
            window.setTimeout(callback, 3000 / 60);
         };
})();

animateC();
});

..そしてここにHTMLがあります..

<div id='wave'>
<canvas id="CCanvas" width="2800" height="2000"></canvas>
</div>