title: Canvas animation is leaving trail/fragments as it moves
body: <p>First of all, I'm using a page turn animation based on this:</p>
  
  <p><a href="http://www.netmagazine.com/tutorials/create-page-flip-effect-html5-canvas" rel="nofollow">http://www.netmagazine.com/tutorials/create-page-flip-effect-html5-canvas</a></p>
  
  <p>I've changed it somewhat, to fit my application. There is no clicking on the page to turn it - you press a button outside the canvas to make it animate. The example they provided animates smoothly, but my version leaves a trail as the page turning animation moves across the canvas. Here's an example of one of the buttons:</p>
  
  <pre><code>function page2Down(event) {
     if(page != 1)
     {
        var canvas = document.getElementById( "pageflip-canvas" );
        canvas.style.zIndex = 100;
        var a = function(){
           var canvas = document.getElementById( "pageflip-canvas" );
           canvas.width = canvas.width;
           canvas.style.zIndex = 0;
        };
        var b = setTimeout(a, 1100);
        if(page &lt; 1)
           flips[page].dragging = true;
        else
           flips[page-1].dragging = true;
     }
  }
  
  function page2Up( event ) 
  {
     var page_num = 1;
     while(page &gt; page_num)
     {
        for( var i = total_pages; i &gt; -1; i-- ) {
           if( flips[i].dragging ) {
              flips[i].target = 1;
              if(i&gt;page_num)
                 flips[i-1].dragging = true;
              page--;
  
           }
           console.log(page);
           flips[i].dragging = false;
        }
     }
  
     while(page &lt; page_num)
     {
        for( var i = 0; i &lt; flips.length; i++ ) {
           if(page == page_num) return false;
           if( flips[i].dragging ) {
              flips[i].target = -1;
              if(i&lt;page_num)
                 flips[i+1].dragging = true;
              page++;
           }
           console.log(page);
           flips[i].dragging = false;
         }    
     }        
  }
  </code></pre>
  
  <p>The render and drawfip functions are the same as in the example. All I changed besides what I specified already were some variables:</p>
  
  <pre><code>var BOOK_WIDTH = 2264;
  var BOOK_HEIGHT = 431;
  var PAGE_WIDTH = 1132;
  var PAGE_HEIGHT = 426;
  </code></pre>
  
  <p>The trail looks pretty bad, and I need to remove it. I believe it may be related to the size of the page, but I'm not entirely sure.</p>
  
  <p>As requested, here's a stripped down version on jsfiddle(I emptied the svg tags so you wouldn't have to plow through all that extra code): <a href="http://jsfiddle.net/vtS2s/" rel="nofollow">http://jsfiddle.net/vtS2s/</a></p>
  
  <p>The "trail" I'm referring to looks like extra pages. It doesn't look as bad in the jsfiddle version (it's still there), which leads me to believe it's related to the amount of code in the tags as well.</p>