Canvasの縦横比がおかしい

上記のコード内容的には、300*300の領域に、1辺100の正方形が描画されることを期待しています。しかし実際のじっこ結果は縦長の矩形が描画されています。これの原因はキャンバスのデフォルトサイズに起因しています。

実行結果(正しいバージョン)

<canvas id="canvas2" width="300px" height="300px" style="border: 1px solid #ddd;" />
<script>
    var canvas1 = document.getElementById("canvas2");
    var context = canvas1.getContext('2d');

    //(10px,10px)の位置から100px×100pxの正方形を描画する
    context.strokeRect(10,10,100,100);  
</script>

canvasのサイズ指定

canvasのサイズを変更する場合、スタイルを変更するのではなく、属性で変更しなければなりません。上記の例だとスタイルで縦横のサイズを変更していますが、これでは見た目上の領域が拡大しているだけで、実際の内部の描画領域は拡大していません。

canvasの内部領域はデフォルト値で 300*150 となっています。スタイルで canvas を大きくしても、内部の領域はデフォルト値のままなので縦横比がおかしくなっています。したがって縦長に描画されることになります。

canvas のサイズを変えるには属性を変えなければなりませんでした。