I'm trying to build a background with moving stars for a website, by following this example http://timothypoon.com/blog/2011/01/19/html5-canvas-particle-animation/ .
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.
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.
This is the code responsible for resizing:
$(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 < 1000; i++) {
pxs[i] = new Circle();
pxs[i].reset();
}
setInterval(draw,rint);
})
