title: Canvas shining star background performance issue
body: <p>I've got an issue with an experiment I'm working on.</p>
  
  <p>My plan is to have a beautiful and shining stars Background on a whole page.
  Using that wondeful tutorial (<a href="http://timothypoon.com/blog/2011/01/19/html5-canvas-particle-animation/" rel="nofollow">http://timothypoon.com/blog/2011/01/19/html5-canvas-particle-animation/</a>) I managed to get the perfect background.
  I use a static canvas to display static stars and an animated canvas for the shining ones.</p>
  
  <p>The fact is it's very memory hungry! On chrome and opera it runs quite smoothly, but on firefox IE or tablet, it was a total mess 1s to render each frame etc... It is worse on pages where HEIGHT is huge.</p>
  
  <p>So i went into some optimisations:</p>
  
  <p>-Using a buffer canvas, the problem was createRadialGradient which was called 1500 times each frame</p>
  
  <p>-Using a big buffer canvas, and 1 canvas for each stars with an only call to createRadialGradient at init.</p>
  
  <p>-Remove that buffer canvas and drawing every stars canvas to the main one</p>
  
  <p>That last optimisation was the best i could achieve so i wrote a fiddle displaying how is the code right now.</p>
  
  <pre><code>   //Buffering the star image
      this.scanvas = document.createElement('canvas');
      this.scanvas.width=2*this.r;
      this.scanvas.height=2*this.r;
      this.scon=this.scanvas.getContext('2d');
      g = this.scon.createRadialGradient(this.r,this.r,0,this.r,this.r,this.r);
      g.addColorStop(0.0, 'rgba(255,255,255,0.9)');
      g.addColorStop(this.stop, 'rgba('+this.color.r+','+this.color.g+','+this.color.b+','+this.stop+')');
      g.addColorStop(1.0, 'rgba('+this.color.r+','+this.color.g+','+this.color.b+',0)');
      this.scon.fillStyle = g;
      this.scon.fillRect(0,0,2*this.r,2*this.r);
  </code></pre>
  
  <p>That's the point where I need you:</p>
  
  <p>-A way to adjust the number of shining stars according to the user perfomance</p>
  
  <p>-Optimisation tips</p>
  
  <p>Thanks in advance to everyone minding to help me and I apologize if I made grammar mistakes, my english isn't perfect.</p>
  
  <p><strong>EDIT</strong>
  Thanks for your feedbacks,
  Let me explains the whole process,
  Every stars has it's own different gradient and size, that's why I stored it into a personal canvas, the shining effect is only done by scaling that canvas on the main one with drawImage.</p>
  
  <p>I think the best would be to prerender 50 or 100 different stars in a buffer canvas then picking and drawing a random one, don't you think?</p>
  
  <p><strong>EDIT2</strong></p>
  
  <p>Updated fiddle according to Warlock great advises, one prerendered star, scaled to match the current size. The stars are less pretty, but the whole thing runs a lot smoother.</p>
  
  <p><strong>EDIT3</strong></p>
  
  <p>Updated fiddle to use a sprite sheet. Gorgeous!!!!</p>
  
  <pre><code> //generate the star strip
      var len=(ttlm/rint)|0;
      scanvas = document.createElement('canvas');
      scanvas.width=len*2*r;
      scanvas.height=2*r;
      scon=scanvas.getContext('2d');
      for(var i=0;i&lt;len;i++){
          var newo = (i/len);
          var cr = r*newo;
          g = scon.createRadialGradient(2*r*i+r,r,0,2*r*i+r,r,(cr &lt;= 2 ? 2 : cr));
          g.addColorStop(0.0, 'rgba(200,220,255,'+newo+')');
          g.addColorStop(0.2, 'rgba(200,220,255,'+(newo*.7)+')');
          g.addColorStop(0.4, 'rgba(150,170,205,'+(newo*.2)+')');
          g.addColorStop(0.7, 'rgba(150,170,205,0)');
          scon.fillStyle = g;
          scon.fillRect(2*r*i,0,2*r,2*r);         
      }
  </code></pre>
  
  <p><strong>EDIT 4(Final)</strong></p>
  
  <p><strong>Dynamic stars creations</strong></p>
  
  <pre><code>function draw() {
      frameTime.push(Date.now());    
      con.clearRect(0,0,WIDTH,HEIGHT);
      for(var i = 0, len = pxs.length; i &lt; len; i++) {
          pxs[i].fade();
          pxs[i].draw();
      }   
      requestAnimationFrame(draw);
      if(allowMore === true &amp;&amp; frameTime.length == monitoredFrame)
      {
          if(getAvgTime()&lt;threshold &amp;&amp; pxs.length&lt;totalStars ) 
          {
              addStars();         
          }
          else
          {
              allowMore=false;
              static=true;
              fillpxs(totalStars-pxs.length,pxss);
              drawstatic();
              static=false;
          }
      }
  }
  </code></pre>
  
  <p>Here is the updated and final fiddle, with spritesheet, dynamic stars creation and several optimisations. If you see anything else i should update don't hesitate.</p>
  
  <p><strong>POST EDIT</strong> Reenabled shooting stars/Prototyped object/got rid of Jquery</p>
  
  <p><a href="http://jsfiddle.net/macintox/K8YTu/32/" rel="nofollow">http://jsfiddle.net/macintox/K8YTu/32/</a></p>
  
  <p>Thanks everyone who helped me, that was really kind and instructive, and I hope it will help somebody sometimes.</p>
  
  <p>Aesdotjs.
  PS: I'm so happy. After testing, that script run smoothly on every browser even IE9. Yatta!!</p>