JavaScript：キャンバスのサイズを画面サイズにあわせて変更

HTMLのcanvasタグは、JavaScriptで気軽に画像やグラフィックを扱うことができて面白いので色々と試している。
個人的に作っているものの中で、canvasタグのサイズをブラウザの画面サイズにあわせて変更したいことが多いので、サンプルを作った。

サンプルを見る

※ブラウザのウインドウサイズを変更して試してください。ウインドウサイズに応じてcanvasに描かれた画像が伸縮するのが分かります。

ポイント
プログラム全体

ポイント

HTML部分

canvasタグは、divタグでくくっておく。（divタグに内包するのが1番のポイント）
canvasタグの幅と高さは指定しなくて大丈夫です。起動時にJavaScriptプログラム側で変更します。

<div id="wrapper">
	<canvas id="canvas" width="" height=""></canvas>
</div>

CSS部分

canvasのdisplayはblock にして、html, bodyとcanvasタグを内包したdivタグ要素は幅・高さを100%にしておく。

#canvas{
	display: block;
}
html, body, #wrapper{
	width: 100%;
	height: 100%;
}

JavaScript部分

キャンバスのサイズを再設定する際に、divタグ側のoffsetWidthとoffsetHeightを指定するようにする。

canvas.width = wrapper.offsetWidth;
canvas.height =  wrapper.offsetHeight;

プログラム全体

サンプルのプログラムでは、ウィンドウのリサイズイベントが発生した際に上記の処理を行っています。
こうすることで常にキャンバスが画面いっぱいに表示されることになります。

以下にサンプルプログラム全体を示します。

サンプル（⇒こちら）では、画面いっぱいに指定した画像ファイルを表示しています。（サンプルの画像の絵柄が見苦しいのはわたしの絵心によるものなのでお許し下さい！）

index.html

1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width,user-scalable=yes">
6    <script src="main.js"></script>
7    <title>キャンバスのサイズを画面サイズに合わせて変更</title>
8    <style>
9        *{
10            margin: 0;
11            padding: 0;
12        }
13        #canvas{
14            display: block;
15        }
16        html, body, #wrapper{
17            width: 100%;
18            height: 100%;
19        }
20    </style>
21</head>
22<body>
23    <div id="wrapper">
24        <canvas id="canvas" width="" height=""></canvas>
25    </div>
26</body>
27</html>

main.js

1/*
2 * グローバル変数
3 */
4let wrapper = null;             // キャンバスの親要素
5let canvas = null;                  // キャンバス
6let g = null;                       // コンテキスト
7let $id = function(id){ return document.getElementById(id); };  // DOM取得用
8let img = new Image();          //画像用
9 
10/*
11 * 定数
12 */
13let IMG_COOLMAN = "coolman.png";
14 
15/*
16 * キャンバスのサイズをウインドウに合わせて変更
17 */
18function getSize(){
19    // キャンバスのサイズを再設定
20    canvas.width = wrapper.offsetWidth;
21    canvas.height =  wrapper.offsetHeight;
22    // 画像を表示
23    g.drawImage(img, 0, 0, canvas.width, canvas.height);
24}
25 
26/*
27 * リサイズ時
28 */
29window.addEventListener("resize", function(){
30    getSize();
31});
32 
33/*
34 * 起動処理
35 */
36window.addEventListener("load", function(){
37    // キャンバスの親要素情報取得（親要素が無いとキャンバスのサイズが画面いっぱいに表示できないため）
38    wrapper = $id("wrapper");
39    // キャンバス情報取得
40    canvas = $id("canvas");
41    g = canvas.getContext("2d");
42 
43    // キャンバスをウインドウサイズにする
44    getSize();
45     
46    // 画像生成
47    img.src = IMG_COOLMAN;
48    img.onload = function(){
49        g.drawImage(img, 0, 0, canvas.width, canvas.height);
50    };
51});