[解決済み】HTML5でのキャンバスの幅と高さについて

質問

HTML5 の canvas 要素を使用できますか？

通常の方法では、次のようになります。

<canvas id="canvas" width="300" height="300"></canvas>

解決方法は？

その canvas DOM要素には .height と .width プロパティに対応する height="…" と width="…" 属性があります。JavaScriptのコードでこれらを数値に設定すると、キャンバスのサイズが変更されます。例えば

var canvas = document.getElementsByTagName('canvas')[0];
canvas.width  = 800;
canvas.height = 600;

これはキャンバスをクリアすることに注意してください。 ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height); を使用して、キャンバスを完全に消去しないブラウザに対処します。サイズ変更後に表示させたいコンテンツがあれば、再描画する必要があります。

さらに、高さと幅は描画に使用される論理的なキャンバスの寸法であり、以下のことに注意してください。 異なる とは異なり style.height と style.width CSS属性で指定します。CSS属性を設定しない場合、キャンバスの固有サイズが表示サイズとして使用されます。CSS属性を設定し、それがキャンバスの寸法と異なる場合、コンテンツはブラウザで拡大縮小されます。例えば

// Make a canvas that has a blurry pixelated zoom-in
// with each canvas pixel drawn showing as roughly 2x2 on screen
canvas.width  = 400;
canvas.height = 300; 
canvas.style.width  = '800px';
canvas.style.height = '600px';

参照 このライブの例 を4倍に拡大したキャンバスを表示します。

var c = document.getElementsByTagName('canvas')[0];
var ctx = c.getContext('2d');
ctx.lineWidth   = 1;
ctx.strokeStyle = '#f00';
ctx.fillStyle   = '#eff';

ctx.fillRect(  10.5, 10.5, 20, 20 );
ctx.strokeRect( 10.5, 10.5, 20, 20 );
ctx.fillRect(   40, 10.5, 20, 20 );
ctx.strokeRect( 40, 10.5, 20, 20 );
ctx.fillRect(   70, 10, 20, 20 );
ctx.strokeRect( 70, 10, 20, 20 );

ctx.strokeStyle = '#fff';
ctx.strokeRect( 10.5, 10.5, 20, 20 );
ctx.strokeRect( 40, 10.5, 20, 20 );
ctx.strokeRect( 70, 10, 20, 20 );

body { background:#eee; margin:1em; text-align:center }
canvas { background:#fff; border:1px solid #ccc; width:400px; height:160px }

<canvas width="100" height="40"></canvas>
<p>Showing that re-drawing the same antialiased lines does not obliterate old antialiased lines.</p>