title: Increase performance for 10,000 particles in HTML5 Canvas
body: <p>I have two JS Fiddles, both with 10,000 snow flakes moving around but with two different approaches.</p>
  <p>The first fiddle: <strong><a href="http://jsfiddle.net/6eypdhjp/" rel="nofollow noreferrer">http://jsfiddle.net/6eypdhjp/</a></strong></p>
  <p>Uses <code>fillRect</code> with a 4 by 4 white square, providing roughly 60 frames per second @ 10,000 snow flakes.</p>
  <p>So I wondered if I could improve this and found a bit of information on HTML5Rocks' website regarding canvas performance. One such suggestion was to pre-render the snow flakes to canvases and then draw the canvases using <code>drawImage</code>.</p>
  <p>The suggestion is here <strong><a href="http://www.html5rocks.com/en/tutorials/canvas/performance/" rel="nofollow noreferrer">http://www.html5rocks.com/en/tutorials/canvas/performance/</a></strong>, namely under the title <strong>Pre-render to an off-screen canvas</strong>. Use <kbd>Ctrl</kbd> + <kbd>f</kbd> to find that section.</p>
  <p>So I tried their suggestion with this fiddle: <strong><a href="http://jsfiddle.net/r973sr7c/" rel="nofollow noreferrer">http://jsfiddle.net/r973sr7c/</a></strong></p>
  <p>How ever, I get about 3 frames per second @ 10,000 snow flakes. Which is very odd given jsPerf even shows a performance boost here using the same method <strong><a href="http://jsperf.com/render-vs-prerender" rel="nofollow noreferrer">http://jsperf.com/render-vs-prerender</a></strong></p>
  <p>The code I used for pre-rendering is here:</p>
  <pre><code>//snowflake particles
  var mp = 10000; //max particles
  var particles = [];
  for(var i = 0; i &lt; mp; i++) {
      var m_canvas        = document.createElement('canvas');
          m_canvas.width  = 4;
          m_canvas.height = 4;
      var tmp             = m_canvas.getContext(&quot;2d&quot;);
          tmp.fillStyle   = &quot;rgba(255,255,255,0.8)&quot;;
          tmp.fillRect(0,0,4,4);
      
      particles.push({
          x  : Math.random()*canvas.width, //x-coordinate
          y  : Math.random()*canvas.height, //y-coordinate
          r  : Math.random()*4+1, //radius
          d  : Math.random()*mp, //density
          img: m_canvas //tiny canvas
      })
  }   
  //Lets draw the flakes
  function draw()    {   
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      for(var i = 0; i &lt; particles.length; i++)       {
          var flake = particles[i];
          ctx.drawImage(flake.img, flake.x,flake.y);    
      }
  }
  </code></pre>
  <p>So I wondered why am I getting such horrendous frame rate? And is there any better way to get higher particle counts moving on screen whilst maintaining 60 frames per second?</p>