title: jQuery resize window background
body: <p>I'm trying to build a background with moving stars for a website, by following this example <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> .</p>
  
  <p>I managed to make it work, but there is a slight problem to it. Whenever I resize the page, I want it to look pretty much the same, with no visible difference. Right now, the page flickers because of the for that I'm using for redrawing the page whenever I resize it.</p>
  
  <p>My question is how do I get rid of that flicker, and, carefully, without remaining with any blank space with no stars when I make the window bigger.</p>
  
  <p>This is the code responsible for resizing:</p>
  
  <pre><code>$(window).resize(function(){
      WIDTH = $(window).width();
      HEIGHT = $(window).height();
      canvas = document.getElementById('pixie');
      $(canvas).attr('width', WIDTH).attr('height',HEIGHT);
      $('.container').width(WIDTH).height(HEIGHT);
      for(var i = 0; i &lt; 1000; i++) {
          pxs[i] = new Circle();
          pxs[i].reset();
      }
      setInterval(draw,rint);
  })
  </code></pre>