height属性

canvas要素のheight属性は、スクリプトでグラフィックを描く領域の高さを、ピクセル単位の数値で指定する任意属性。HTML5にて新たに導入された属性である。

ブラウザ対応

構文

<canvas height="ピクセル値"></canvas>

ピクセル値

ピクセル単位の数値を指定する。128ピクセルであれば、128と指定する。

サンプルコード

<canvas id="sample" height="500">
	JavaScriptを実行できない環境ですね。
</canvas>
<script type="text/javascript">
	var $canvas = document.getElementById('sample');
	var $context = $canvas.getContext('2d');
	$context.fillStyle ='rgb(255,0,0)';
	$context.fillRect(10,10,50,50);
</script>

スクリプトでグラフィックを描く領域の高さを、500ピクセルに指定。

サンプル

HTMLソースコード

<canvas id="sampleCanvas" width="150" height="450">
	JavaScriptを実行できない環境ですね。
</canvas>
<script type="text/javascript">
	var $canvas = document.getElementById('sampleCanvas');
	var $context = $canvas.getContext('2d');
	$context.fillStyle = 'rgb(255,0,0)';
	$context.fillRect(0,0,150,150);
	$context.fillStyle = 'rgb(0,255,0)';
	$context.fillRect(0,150,150,150);
	$context.fillStyle = 'rgb(0,0,255)';
	$context.fillRect(0,300,150,150);
</script>

実際の表示

JavaScriptを実行できない環境ですね。