[解決済み] キャンバスを親と同じ大きさ、同じ高さにする

質問

長方形のキャンバスを作ってプログレスバーを表示させたいのですが しかし、私がキャンバスの幅と高さを100％に設定したとき、それは実際に親のように高さと幅を作ることはないようです。

以下の例を参照してください。

http://jsfiddle.net/PQS3A/

正方形でないキャンバスを作ることは可能でしょうか？ キャンバスの高さと幅をハードコードしたくありません。モバイルデバイスを含む、より大きな画面や小さな画面で見たときに動的に変化する必要があるからです。

どのように解決するのですか？

問題を解決した動作例です。

http://jsfiddle.net/PQS3A/7/

あなたの例では、いくつかの問題がありましたね。

1. A <div> には height または width という属性があります。これらはCSSで設定する必要があります。
2. div が正しいサイズであったとしても、デフォルトの position:static を使用しています。これは、div がどの子の親としても位置決めされていないことを意味します。canvas を div と同じサイズにしたい場合は、div を position:relative (または absolute または fixed ).
3. は width と height 属性は、描画するデータのピクセル数（画像の実際のピクセルのようなもの）を指定するもので、Canvasの 表示サイズ とは別のものです。これらの属性は整数に設定する必要があります。

上記のリンク先の例では、CSS を使用して div のサイズを設定し、positioned parent にしています。JS 関数（下図）を作成し、canvas のサイズが同じになるように設定しています。 表示 と同じサイズになるように設定し、内部の width と height プロパティで、表示と同じピクセル数になるようにします。

var canvas = document.querySelector('canvas');
fitToContainer(canvas);

function fitToContainer(canvas){
  // Make it visually fill the positioned parent
  canvas.style.width ='100%';
  canvas.style.height='100%';
  // ...then set the internal size to match
  canvas.width  = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
}