Canvasの幅と高さ

JavaScript

Canvasはwidthとheight属性を指定しないと、widthが300pxでheightが150pxになる。
じゃあ、CSSでwidthとheightしたらどうなるんだろうか？と思って指定してみると、描画できるcanvas自体はwidth属性とheight属性でしたいした領域になる。
それでCSSで指定した幅でcanvasが広がって（伸ばされて？）表示されるみたい。

これ表示してみると

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <style>
            canvas {
                width: 400px;
                height: 400px;
            }
        </style>
        <title>てすと</title>
    </head>
    <body>
        <canvas id="canvas"></canvas>
        <script>
            (function () {
                var ctx = document.getElementById("canvas").getContext("2d");
                ctx.rect(50, 50, 20, 20);
                ctx.fill();
            })();
        </script>
    </body>
</html>

正方形書いてるけど、CSSでwidthとheightを400pxって指定すると幅と高さの比率が変わるので間延びして長方形を書いたように見える。

Canvasの幅と高さ取るのに、widthでいいのかclientWidthなのかgetBoundingClientRectでとったほうがいいのか。paddingとかmargin設定したらだめじゃんとかいろいろ迷ったけど、どうやら素直にwidthとheightを使えばいいっぽいな。