HTML canvasを画面いっぱいに表示したい

canvasのサイズをwindowサイズに合わせて画面いっぱいに表示させたい。
そんなとき、canvasのサイズ指定をjQueryの.css()を使ってやろうとするとうまくいきません。

具体的に書くと、

HTML:

<div id="wrapper">
	<canvas id="canvas"></canvas>
</div>

というマークアップに対してcanvasのサイズを指定すべく、
windowのloadイベントやresizeイベントが発火したタイミングで

JS:

$( '#canvas' ).css({
	width: $( window ).width(),
	height: $( window ).height()
});

という風に記述したとしましょう。

つまり、マークアップ上では、

HTML:

<div id="wrapper">
	<canvas id="canvas" style="width: XXXpx; height: YYYpx;"></canvas>
</div>

となっている状態です。
この状態でcanvasを動かすと、描画が歪んでしまってうまく表示されません。

どういうことかというと、

canvasのDOMにサイズ指定するには、htmlのattributeに直接widthとheightを記述する必要があるからです。

つまり、以下のような書き方になります。

<div id="wrapper">
	<canvas id="canvas" width="XXX" height="YYY"></canvas>
</div>

これを実現するJavaScriptは以下のようになります。

$( '#canvas' ).get( 0 ).width = $( window ).width();
$( '#canvas' ).get( 0 ).height = $( window ).height();

これで無事正しくcanvasを全画面で描画させることができます。