Canvas図形が指定サイズで表示されない時は、CSSではなくCanvasタグで指定

謎の挙動
・下記コードを試したら、びっくりするぐらい謎の挙動を示して悩む
・以前のIEバグを連想するぐらい、指定サイズと表示サイズが異なる
・縦横比もおかしくなり、描画した図形が縦に伸びてしまう

・HTML

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

・CSS

#stage{

 width:600px;

 height:600px;

}

 
・JavaScript

var canvas=document.getElementById("stage");

var ctx=canvas.getContext("2d");

ctx.fillStyle="yellow";

ctx.fillRect(0,0,50,50)

---

原因

・Canvasのwidth／heightを、CSSで指定したから

---

対策

・Canvas要素のwidth／heightは、CSSではなくCanvasタグで直接指定する

<canvas width="600" height="600" id="stage">

---

感想

・なめてんじゃねーよ、てくらい頭に来た
・何なのこの仕様？
・CSSバカにしてるの？
・HTML直書は避けようとするから、これ普通にハマるよね？

Canvas要素
・width … 初期値300
・height … 初期値150

・初期値云々の話ではない
・サイズだけではなく比率も変わってくる時点で、CSS指定は全く使えない

・これ調査するのにかかった3時間と、「何なのコレ？全然分からん」とブルーになる前の「土曜の朝のいい感じだった気持ち」を、誰か返してくれー