JavaScriptでCanvasの幅と高さを動的に変更する方法

2024-06-19

HTML5におけるCanvasの幅と高さ

属性による設定

<canvas>要素の幅と高さを設定するには、widthとheight属性を使用します。構文は以下の通りです。

<canvas id="myCanvas" width="600" height="400"></canvas>

この例では、myCanvasというIDを持つキャンバス要素を作成し、幅を600ピクセル、高さを400ピクセルに設定しています。

デフォルト値

widthとheight属性を省略した場合、デフォルト値はそれぞれ300ピクセル、150ピクセルとなります。

ピクセル以外の単位

幅と高さは、ピクセル以外にもパーセンテージやem単位で指定することも可能です。例えば、以下のコードは、親要素の幅の50%、親要素の高さを100%に設定します。

<canvas width="50%" height="100%"></canvas>

JavaScriptによる設定

<canvas>要素の幅と高さをJavaScriptで動的に変更することもできます。以下のコードは、myCanvas要素の幅を100ピクセル、高さを200ピクセルに設定します。

var canvas = document.getElementById('myCanvas');
canvas.width = 100;
canvas.height = 200;

描画領域と表示領域の関係

widthとheight属性で設定した値は、描画領域のサイズを決定します。描画領域とは、JavaScriptを使って描画を行うことができる領域です。一方、表示領域は、ブラウザウィンドウ上でキャンバスが表示される領域です。

表示領域のサイズは、CSSを使って設定することができます。例えば、以下のCSSは、myCanvas要素の幅を200ピクセル、高さを300ピクセルに設定します。

#myCanvas {
  width: 200px;
  height: 300px;
}

描画領域と表示領域が異なる場合

描画領域と表示領域のサイズが異なる場合、描画結果は以下のようになります。

描画領域の方が大きい場合: 描画領域全体は表示されず、はみ出した部分は表示されません。
表示領域の方が大きい場合: 描画領域は中央に配置され、周囲には空白が表示されます。

まとめ

HTML5の<canvas>要素の幅と高さを設定するには、以下の2つの方法があります。

HTML属性: widthとheight属性を使用する
JavaScript: canvas.widthとcanvas.heightプロパティを使用する

描画領域と表示領域のサイズは、それぞれ独立して設定することができます。必要に応じて、適切な方法を選択してください。

HTML5 Canvasの幅と高さ：サンプルコード

以下、HTMLとJavaScriptのコード例をいくつかご紹介します。それぞれの例では、canvas要素の幅と高さを様々な方法で設定しています。

HTML属性による設定

1 基本的な設定

この例では、widthとheight属性を使って、幅600ピクセル、高さ400ピクセルのキャンバス要素を作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Canvas 幅と高さ（HTML属性）</title>
</head>
<body>
  <canvas id="myCanvas" width="600" height="400"></canvas>

  <script>
    // 描画処理などを記述する
  </script>
</body>
</html>

2 デフォルト値

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Canvas 幅と高さ（デフォルト値）</title>
</head>
<body>
  <canvas id="myCanvas"></canvas>

  <script>
    // 描画処理などを記述する
  </script>
</body>
</html>

3 パーセンテージによる設定

この例では、width属性を50%、height属性を100%に設定し、親要素の幅と高さを基準としたサイズのキャンバス要素を作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Canvas 幅と高さ（パーセンテージ）</title>
</head>
<body>
  <div style="width: 800px; height: 600px;">
    <canvas id="myCanvas" width="50%" height="100%"></canvas>
  </div>

  <script>
    // 描画処理などを記述する
  </script>
</body>
</html>

JavaScriptによる設定

1 canvas.widthとcanvas.heightプロパティ

この例では、JavaScriptを使って、canvas.widthとcanvas.heightプロパティに値を代入することで、キャンバス要素の幅と高さを設定します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Canvas 幅と高さ（JavaScript）</title>
</head>
<body>
  <canvas id="myCanvas"></canvas>

  <script>
    var canvas = document.getElementById('myCanvas');
    canvas.width = 400;
    canvas.height = 300;

    // 描画処理などを記述する
  </script>
</body>
</html>

描画領域と表示領域の関係

1 描画領域が大きい場合

この例では、HTMLで幅600ピクセル、高さ400ピクセルのキャンバス要素を作成し、JavaScriptで赤い四角形を描画します。キャンバス要素の幅と高さは600ピクセルと400ピクセルなので、描画領域全体が表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Canvas 描画領域（大きい場合）</title>
</head>
<body>
  <canvas id="myCanvas" width="600" height="400"></canvas>

  <script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');

    ctx.fillStyle = 'red';
    ctx.fillRect(0, 0, 600, 400);
  </script>
</body>
</html>

2 表示領域が大きい場合

この例では、HTMLで幅200ピクセル、高さ100ピクセルのキャンバス要素を作成

HTML5 Canvasの幅と高さを設定するその他の方法

CSSによる設定

CSSを使って、canvas要素の幅と高さを設定することができます。この方法は、HTMLコードを簡潔に記述したい場合に有効です。

#myCanvas {
  width: 500px;
  height: 250px;
}

window.innerWidthとwindow.innerHeightプロパティ

JavaScriptを使って、window.innerWidthとwindow.innerHeightプロパティの値を取得し、キャンバス要素の幅と高さに設定することができます。この方法は、ブラウザウィンドウ全体のサイズに合わせてキャンバス要素を伸縮したい場合に有効です。

var canvas = document.getElementById('myCanvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

getBoundingClientRect()メソッド

JavaScriptを使って、canvas要素のgetBoundingClientRect()メソッドを呼び出し、取得した情報からキャンバス要素の幅と高さを設定することができます。この方法は、親要素のサイズや配置に影響を受けずに、キャンバス要素の実際のサイズを取得したい場合に有効です。

var canvas = document.getElementById('myCanvas');
var rect = canvas.getBoundingClientRect();
canvas.width = rect.width;
canvas.height = rect.height;

レスポンシブデザイン

メディアクエリなどを活用して、ブラウザウィンドウのサイズに応じてキャンバス要素の幅と高さを自動的に調整することができます。この方法は、様々なデバイスで最適な表示をしたい場合に有効です。

/* スマートフォン */
@media (max-width: 768px) {
  #myCanvas {
    width: 90%;
    height: 300px;
  }
}

/* タブレット */
@media (min-width: 769px) and (max-width: 1024px) {
  #myCanvas {
    width: 600px;
    height: 400px;
  }
}

/* デスクトップ */
@media (min-width: 1025px) {
  #myCanvas {
    width: 800px;
    height: 600px;
  }
}