canvasのwidthとheightの取得

html5 
<canvas id="canvas"></canvas>

で

document.getElementById('canvas').width

だと結果は「300」デフォルト。

<canvas id="canvas"></canvas>

で

#canvas {
   	width:500px;
	height:500px;
}

で

document.getElementById('canvas').width

だと結果は「300」デフォルト。

document.getElementById('canvas').style.width

だと空。

<canvas id="canvas" style="width:500px;height:500px;"></canvas>

で

document.getElementById('canvas').width

だと結果は「300」デフォルト。

document.getElementById('canvas').style.width

だと結果は「500」

<canvas id="canvas" width="500" height="500"></canvas>

で

document.getElementById('canvas').width

だと結果は「500」

document.getElementById('canvas').style.width

だと結果は空


ん？