width属性

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

ブラウザ対応

構文

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

ピクセル値

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

サンプルコード

<canvas id="sample" width="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="450" height="150">
	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(150,0,150,150);
	$context.fillStyle = 'rgb(0,0,255)';
	$context.fillRect(300,0,150,150);
</script>

実際の表示

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