[解決済み】CSSを使用するとキャンバスが伸びるが、width/heightプロパティでは正常

質問

2つのキャンバスがあり、1つはHTML属性を使用しています。 width と height を使用してサイズを調整するものと、CSSを使用してサイズを調整するものがあります。

<canvas id="compteur1" width="300" height="300" onmousedown="compteurClick(this.id);"></canvas>
<canvas id="compteur2" style="width: 300px; height: 300px;" onmousedown="compteurClick(this.id);"></canvas>

コンピュター1は正常に表示されますが、コンピュター2は表示されません。 コンテンツは、300x300のキャンバスにJavaScriptで描画されています。

なぜディスプレイの違いがあるのですか？

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

のようです。 width と height 属性はキャンバスの座標系の幅や高さを決定しますが、CSS プロパティは表示されるボックスの大きさを決定するだけです。

の中で説明されています。 HTML仕様 :

は canvas 要素には、要素のビットマップの大きさを制御するための 2 つの属性があります。 width と height . これらの属性は、指定された場合、以下の値を持つ必要があります。 有効な非負の整数 . また 非負の整数を解析するルール は、その数値の取得に使用されなければならない。属性がない場合、またはその値を解析してエラーが発生した場合は、代わりにデフォルト値が使用されなければなりません。また width 属性のデフォルトは300、そして height 属性のデフォルトは150です。