JavaScriptでキャンバスの画像の高さを設定する方法

1. キャンバス要素をHTMLで作成します。例えば、以下のようなコードを使用します。

<canvas id="myCanvas"></canvas>

2. JavaScriptで、キャンバス要素を取得します。

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');

3. 画像を読み込み、キャンバスに描画します。

const image = new Image();
image.src = 'path/to/image.jpg';
image.onload = function() {
  context.drawImage(image, 0, 0);
}

4. 画像の高さを設定するために、キャンバス要素の高さを変更します。

const imageHeight = 300; // 設定したい画像の高さ
canvas.height = imageHeight;

5. 画像を描画する前に、キャンバスをクリアしておくことも忘れないでください。

context.clearRect(0, 0, canvas.width, canvas.height);