title: Why is this canvas animation running choppy?
body: <p>I think I'm reloading the image too many times or there's an error in my loops, but this is my first canvas project, so I'm not sure how to handle calls and methods. Anybody mind giving me a hand or explaining a bit?</p>
  
  <p>BTW; I need for of these with different patterns on the site, hence the vectors. I'm using three more of the animateC() function with different names and vector positions (they're identical otherwise) and different canvases(<code>&lt;canvas id="CSCanvas" width="2800" height="2000"&gt;&lt;/canvas&gt;</code>) inside the 'wave' div. Is this the right way to go about that?</p>
  
  <p><a href="http://jsfiddle.net/6FRa9/" rel="nofollow">The JSDfiddle is right this way.</a></p>
  
  <p>and here's the script..</p>
  
  <pre><code>$(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&lt;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 &gt; 120) offset=0;
      requestAnimationFrame(animateC);
  }
  
  
  window.requestAnimationFrame = (function(){
    return window.requestAnimationFrame       ||
           window.webkitRequestAnimationFrame ||
           window.mozRequestAnimationFrame    ||
           function( callback ){
              window.setTimeout(callback, 3000 / 60);
           };
  })();
  
  animateC();
  });
  </code></pre>
  
  <p>..and here's the HTML..</p>
  
  <pre><code>&lt;div id='wave'&gt;
  &lt;canvas id="CCanvas" width="2800" height="2000"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  </code></pre>