canvasのサイズ指定方法 – 画面サイズに合わせて自動的に変更させたい-

Webデザイン入門オンライン講座 Udemy

先日の記事（「Chart.js を使って、簡単にレーダーチャートを作る。」）では、canvasとjsライブラリーである、Chart.js（公式サイト）を使った、レーダーチャートの描画方法をご紹介しました。

このcanvas、表示サイズの指定がすこしややこしいので、その方法をご案内します。

canvasにおける表示サイズ指定 基本

canvasのサイズ指定は、htmlのwidthプロパティで指定します。
デフォルトは、幅300px、高さ150px。

これを例えば、

<canvas width="800" height="450"></canvas>

ってやってあげれば、指定通りのサイズで描画されます。

cssで指定するとややこしい

サイズの指定だったら、cssでやればよいじゃん。って思いますが、思った通りにいきません。

cssでスタイリングすると、canvasのwidthプロパティで指定したサイズに対する、相対的なサイズとして認識されます。

これについては、デモ画面を用いて詳しく解説してくださっているサイトがありましたので、そちらをご覧ください。

Canvas.width - キャンパスの横幅を取得、変更する

https://syncer.jp/javascript-reference/canvas-width

JavaScriptの、Canvasオブジェクトのwidthは、キャンパスの描画領域の横幅を取得、変更するプロパティです。何も指定しない場合、横幅300px、高さ150pxになります。

ウィンドウサイズに合わせて自動で変更する方法

htmlのcanvas要素にwidthプロパティで指定すれば良いことはわかりましたが、それだと、サイズが固定されてしまいます。

画面サイズに合わせて動的に変えたい場合、どうしたら良いか。

jsを使えば解決できます。

    <div class="contents">
        <canvas id="rader_result"></canvas>
    </div>

例えば、こんな感じで、canvas要素の親要素を用意します。
親要素に対して、

.contents{
  width: 100%;
  height: 100%;
}

このように指定。

var w = $('.contents').width();
var h = $('.contents').height();
$('#rader_result').attr('width', w);
$('#rader_result').attr('height', h);

js（jQuery）で、親要素の横幅、高さを取得し、canvas要素のwidthとheightプロパティに、その数値を追加する感じです。

デモ画面で実際の動きをご確認ください。
ブラウザの伸縮に合わせて、canvas要素に描画されているチャートの大きさが変わるのを確認できます。