title: Performance issue with off-screen canvas in Firefox
body: <p>I'm having the following problem, and I believe I must be doing something stupid, but I can't find it. (This is in Firefox 8)</p>
  
  <p>I'm taking a large sprite file, making a new small canvas to hold just <em>one</em> tile of that sprite, and then using the most basic overload of <code>drawImage</code> to draw this isolated tile in hundreds of places in my "screen" canvas.</p>
  
  <p>I'm doing this instead of simply using the last overload of <code>drawImage</code>, that takes only a piece of the larger sprite file. By avoiding this clipping, in Chrome, I get a performance increase of about 10%, to my surprise. However, in Firefox, frame rate drops from 300 to 17 FPS.</p>
  
  <p>So, what I'm seeing essentially is that drawing "from image to canvas" is about 20 times faster than drawing "from canvas to canvas" in Firefox.</p>
  
  <p>Is this correct? I haven't found any information on this particular case, but this is what I see on my tests.</p>
  
  <p>Also, this the code I'm using. Am I doing anything incredibly stupid?</p>
  
  <pre><code>function Test5() {
      var imgSprite = $('imgSprite');
      var tileCanvas = document.createElement("canvas");
      tileCanvas.width = 64; tileCanvas.height = 31;
      var tileCtx = tileCanvas.getContext("2d");
      tileCtx.drawImage(imgSprite, 0, 0, 64, 31, 0, 0, 64, 31);
  
      //--------------------------------------
      var ctx = getContext('mainScreen');
  
      ctx.fillStyle = '#fff';
  
      time(function() { // time will run this function many times and time it
          ctx.fillRect(0,0, 1200,900);
          var x=0, y=0, row = 0;
          for (var i=1; i &lt; 1000; i++) {
              ctx.drawImage(tileCanvas, x,y); // &lt;-- this is the line I care about
              // some simple code to calculate new x/y
          }
      }, 1000, "Test5", 'Drawing from an individual tile canvas, instead of a section of big sprite');
  }
  </code></pre>
  
  <p>If, instead of</p>
  
  <pre><code> ctx.drawImage(tileCanvas, x,y);  
  </code></pre>
  
  <p>I do :   </p>
  
  <pre><code> ctx.drawImage(imgSprite, 0, 0, 64, 31, x, y, 64, 31);  
  </code></pre>
  
  <p>That's 20 times faster</p>
  
  <p>Am I missing something here?</p>
  
  <hr>
  
  <p><strong>EDIT:</strong> After asking this I made a little page for myself to test several different things in different platforms and see what was the best way to do things in each.</p>
  
  <p><a href="http://www.crystalgears.com/isoengine/jstests3-canvas.html" rel="nofollow">http://www.crystalgears.com/isoengine/jstests3-canvas.html</a></p>
  
  <p>I'm sorry that code is horrifically ugly, it was a quick hack, not meant to be seen by others, or even myself in a few days.</p>