HTML <canvas> height属性

HTML <canvas> タグ

定義と使用方法

height 属性はピクセル単位で<canvas>要素の高さを定義します。

ヒント

使用してください width属性 ピクセル単位で<canvas>要素の幅を指定します。

キャンバスの高さや幅をリセットするたびに、キャンバスの内容がクリアされます（ページ下部の例を参照してください）。

当社の HTML Canvas チュートリアル で<canvas>要素に関する知識を学びましょう。

インスタンス

例1

高さと幅がそれぞれ200ピクセルの<canvas>要素：

<canvas id="myCanvas" width="400" height="400" style="border:1px solid">

実際に試してみる

例2

高さ属性を300pxに設定することでキャンバスをクリアします（JavaScriptを使用して）：

<canvas id="myCanvas" width="400" height="400" style="border:1px solid"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#0192B9";
ctx.fillRect(50, 50, 300, 300);
function clearCanvas() {
  c.height = 400;
}
</script>

実際に試してみる

構文

<canvas height="ピクセル">

属性値

値 説明
ピクセル キャンバスの高さをピクセルで指定します（例：“100”）。デフォルト値は 150 です。

ブラウザのサポート

このテーブルの数字には、この属性を完全にサポートする最初のブラウザのバージョンが示されています。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 2.0 3.1 9.0

HTML <canvas> タグ