HTML5 Canvas resize to fit window

http://stackoverflow.com/questions/1664785/html5-canvas-resize-to-fit-window

by schr

HTML

<div id="logo"><h1>GALLAIT</h1></div>

<div id="housewarming" class="event">
<h2>Openingsfeest<h2>
<h2 id="housewarming_heading">Housewarming</h2>
<h2>Crémaillère</h2>
<p>Friday October 14 2011</p>
<p>15:00-22:00</p>
</div>

<div id="constant_logo"><pre>    
         *
    *
  *
  *
   *
     *
       *
          *
              *
                  C O N S T A N T
                       V Z W
</pre></div>
<canvas id="drawing_surface"></canvas>

<span>Vrije cultuur</span>
<span>Uitwisseling</span>
<span>Delen</span>
<span>Internet</span>
<span>Digitale kunst</span>
<span>Participatie</span>
<span>Remix</span>
<span>Ontwikkeling</span>
<span>Design</span>
<span>Media</span>
<span>Buurt</span>
<span>Toegankelijk</span>
<span>Specialistisch</span>
<span>Kruisbestuiving</span>
<span>Open bronnen</span>
<span>Experiment</span>
<span>Generator</span>
<span>Free Culture</span>
<span>Exchange</span>
<span>Sharing</span>
<span>Internet</span>
<span>Digital Arts</span>
<span>Participation</span>
<span>Remix</span>
<span>Development</span>
<span>Design</span>
<span>Media</span>
<span>Neighbourhood</span>
<span>Acessibility</span>
<span>Specialisation</span>
<span>Cross-Pollination</span>
<span>Open sources</span>
<span>Experiment</span>
<span>Generator</span>
<span>La culture libre</span>
<span>l'échange</span>
<span>le partage</span>
<span>l'internet</span>
<span>l'art numérique</span>
<span>la participation</span>
<span>le remix</span>
<span>le développement</span>
<span>le design</span>
<span>les médias</span>
<span>le quartier</span>
<span>accessibilité</span>
<span>spécialisation</span>
<span>la pollinisation croisée</span>
<span>les sources libres</span>
<span>l'expérimentation</span>
<span>le générateur</span>

CSS

html, body {
    width:  100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    font-size: 36px;
    line-height: 36px;
    font-family: 'League Gothic Extended', serif;
    background-color: #A3B3B3;
}

canvas {
//    position: absolute;
    z-index: -200;
}

div {
    position: absolute;
    background-color: rgb(255,255,0);
}

div#logo {
    font-size: 72px;
    z-index: 100;
}

div#constant_logo {
   font-family: fixed-width;
   font-size: 10px;
   line-height: 10px;
   background-color: transparent;
}

div#housewarming p {
font-size: 18px;
    line-height:18px;
}

JavaScript

$( "div" ).draggable();

var cnvs = document.getElementById("drawing_surface");
var ctx = cnvs.getContext("2d");
var width = window.innerWidth;
var height = window.innerHeight;

var words = $('span');
words.hide();

function randomWord() {
    return words[Math.floor(Math.random() * words.length)];
}

function getColor() {
  var colors = ["rgb(255,255,0)","rgb(0,255,0)","rgb(255,0,0)"];
  return colors[Math.floor(Math.random() * (colors.length))];
}

function getSticker() {
  var stickers = [rounded_rectangle, circle];
  return stickers[Math.floor(Math.random() * (stickers.length))];
}

function draw() {;
    width = window.innerWidth;
    height = window.innerHeight;
    ctx.canvas.width = width;
    ctx.canvas.height = height;
}

function update() {
    var word = randomWord()
    var position = [Math.random() * width, Math.random() * height];
    ctx.font = "normal 36px 'League Gothic Extended'";
    var sticker = getSticker();
    ctx.save();
    ctx.rotate(Math.PI*2 * Math.random());
    sticker(word, position);
    ctx.restore();
}

function rectangle(word, position) {
    ctx.fillStyle = "rgb(255,255,0)";
    ctx.fillRect(position[0] - 5, position[1] - 5, $(word).width() + 10, $(word).height() + 10);
    ctx.fillStyle = "rgb(0,0,0)";
    ctx.textBaseline = "top";
    ctx.fillText($(word).text(), position[0], position[1]);
}

function rounded_rectangle(word, position) {
    ctx.fillStyle = getColor();
    var x = position[0];
    var y = position[1];
    var radius = 4;
    var width = $(word).width() + 10;
    var height = $(word).height() + 10;
    ctx.beginPath();
    ctx.moveTo(x + radius, y);
    ctx.lineTo(x + width - radius, y);
    ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
    ctx.lineTo(x + width, y + height - radius);
    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
    ctx.lineTo(x + radius, y + height);
    ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
    ctx.lineTo(x, y +...