HTMLコード
<body>
<canvas id="can"></canvas>
<script src="example.js"></script>
</body>
上記コードのように、HTMLで「canvas要素」をID名「can」で記述し、
それをJavascript（ファイル名「example.js」）でいじっていきたいときの
サイズに関してのお話です。
まず「canvas」には「キャンバスサイズ」と「表示サイズ」があり、
「キャンバスサイズ」はHTMLで定義したcanvas要素をJavaScriptでいじっていく時の
基本となるサイズになります。
「表示サイズ」は、「キャンバスサイズ」で決定したサイズや形などを基準にどれだけの倍率でブラウザに表示するかというサイズになります。
JSコード
let can=document.getElementById("can");
let con=can.getContext("2d");
can.style.border="5px solid #000";
function square(){
con.fillStyle="red";
con.fillRect(140,65,20,20);
}
square();
上記コードのように、
まず「getElementById」でHTMLの「canvas要素」を取得、
「getContext」で２Dの描画を作成していくとし、
キャンバスサイズ（初期値）に枠線を描画、
塗りつぶし(fill)の「色」と「座標、サイズ」を指定した「square関数」を定義、
その「square関数」を呼び出し、
上記画像をブラウザに表示させました。
まず最初に知っておかないといけないのは
キャンバスサイズは何も設定していなければ
初期値である「width:300px,height:150px」に自動で設定されます。
なので画像のような横長長方形になっているんですね。
キャンバスサイズは初期値の３００×１５０ですが、
表示サイズもまだ何も設定されていないため、
キャンバスサイズに準じている状態です。
その初期値の縦横の長さを踏まえた上で、「square関数」で指定した塗りつぶし四角を
丁度真ん中に持ってくるように指定しています。
それではこの長方形のキャンバスサイズ正方形にするために、
まずキャンバスサイズを変更していきます。
HTMLコード
<body>
<canvas id="can" width="300px" height="300px"></canvas>
<script src="example.js"></script>
</body>
HTMLのcanvas要素に上記コードのように「width」と「height」を追加して指定すると
初期値であった長方形が、
画像のような正方形のキャンバスサイズに変更されました。
次に「表示サイズ」を見ていきます。
表示サイズは今まで設定してきた「キャンバス」自体をブラウザにどのように表示させるかというもので、
普通はCSSを使って記述していくのですが、
今回はJSにCSSを記述していくやり方です。
JSコード
can.style.width="300px";
can.style.height="300px";
先程のJSの記述に上記コードを追加しました。
JSにサイズのCSSを記述するときは、
取得ID名（今回だと「can」）.style.「width or height」="サイズ";
という感じで記述します。
このコードだと、先程設定した「キャンバスサイズ」も３００×３００なので、
表示サイズもキャンバスサイズと一緒になり、先程の正方形になります。
JSコード
can.style.width="600px";
can.style.height="３00px";
次に表示サイズのwidthを６００pxにしてみます。
すると、黒の外枠は横長の長方形になりましたが、中の赤正方形も横に引き伸ばされました。
これは元の「キャンバスサイズ」は変わらず３００×３００の正方形なのに対し、
「表示サイズ」を横長にすることによって
キャンバス自体はそのままに、表示サイズで設定した横幅６００pxまで引き伸ばした結果になるためです。
HTMLで「canvas要素」を設定して、
「キャンバスサイズ」を設定せず（この時点で縦１５０px、横３００pxの初期値）、
CSSで表示サイズを３００×３００の正方形に設定したとしても、
上記画像のようにブラウザに表示されるのは
横長のキャンバスが縦に引き伸ばされた正方形ができてしまうということですね。