Edited at

canvasのサイズ指定

More than 1 year has passed since last update.

canvasのデフォルトサイズは、幅300px、高さ150px。

canvasのサイズを変更したい場合は、canvasタグのwidth属性、height属性を変更しなければならない。cssでスタイリングすると、canvasのデフォルトサイズからの相対サイズになってしまうため、canvas内に描画した画像が引き伸ばされることになる。


canvasをフルスクリーンで表示したいとき

<div class="wrapper">

<canvas id="canvas"></canvas>
<!-- .wrapper // --></div>

canvasタグのラッパー要素に対して、CSSで幅と高さを100%にしておく。

.wrapper{

width: 100%;
height: 100%;
}

canvas要素のwidth、height属性を、jsで.wrapperに合わせる。

var w = $('.wrapper').width();

var h = $('.wrapper').height();
$('#canvas').attr('width', w);
$('#canvas').attr('height', h);