HTML5 Canvas 100% height and width

Question

I\'m trying to make this raindrop canvas script take up 100% width and height, but nothing I seem to do works. I tried changing the CSS, and height/width in the Canvas area, but

Answer 1

I've set up a fiddle that shows how to resize the canvas using some simple CSS.

http://jsfiddle.net/C7LfU/1/

$('#canvasRain').css({
   "height": window.innerHeight,
   "width": window.innerWidth
});

I've also went ahead and updated your animation to use requestAnimationFrame. This probably what caused your Flakes to be fuzzy: The animation lagged since setTimeout doesn't scale to when the browser is actually ready to draw another frame.

window.requestAnimFrame = (function () {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) {
        window.setTimeout(callback, 1000 / 60);
    };
})();

function animate() {
    requestAnimFrame(animate);
    Update();
    Draw();
}

Read a little more about why you should use requestAnimationFrame at: http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/