[解決済み] HTML5 canvas をウィンドウに合わせてリサイズする

質問

HTML5 の拡大縮小を自動的に行うには <canvas> 要素をページに合わせることができますか？

例えば <div> を設定することで、スケールすることができます。 height と width プロパティを100%にする必要がありますが <canvas> はスケールしませんよね？

解決方法は？

私は、これに対するエレガントな解決策を見つけたと思っています。

ジャバスクリプト

/* important! for alignment, you should make things
 * relative to the canvas' current width/height.
 */
function draw() {
  var ctx = (a canvas context);
  ctx.canvas.width  = window.innerWidth;
  ctx.canvas.height = window.innerHeight;
  //...drawing code...
}

CSS

html, body {
  width:  100%;
  height: 100%;
  margin: 0;
}

今のところ、パフォーマンスに大きな悪影響はありません。