背景をCanvasにする #JavaScript

背景をCanvasにしてグリグリ動かすとインパクトがあって良い。(これとかこういう感じ)
少し工夫しないとCanvasが前面に来てボタンの操作とかができなくなるので、下記のようなHTML/CSSを書いてやる。

<body>
  <canvas id="canvas"></canvas>
  <section id="body>
    /* 実際のbodyはここに書く */
  </section>
</body>

#canvas { position:fixed;    top:0; left:0; width:100%; height:100%; }
#body   { position:absolute; top:0; left:0; }

キャンバスサイズを小さめにしておくと拡大されてボワッとした感じになるけどそのぶん軽量。

var canvas = document.getElementById("canvas");
canvas.width  = 480;
canvas.height = 320;