More than 5 years have passed since last update.

canvasのサイズ指定

Last updated at 2018-05-15Posted at 2015-02-25

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);