なぜfillRectはキャンバス全体をカバーしていませんか？

Question

私はwidthとheight属性のないキャンバスタグを持っています。キャンバスにはインラインの幅と高さがあります。今ではlinearGradientを適用すると、キャンバス全体をカバーすることはできません。デモ：

var c = document.getElementById("canvas"); 
 
var ctx = c.getContext("2d"); 
 

 

 

 
var gradient1 = ctx.createLinearGradient(0, 0, 150, 0); 
 

 
gradient1.addColorStop(0, "#123456"); 
 
gradient1.addColorStop(1, "#654321"); 
 
ctx.fillStyle = gradient1; 
 

 
ctx.fillRect(0, 0, 150, 100);

canvas { 
 
    border: 1px dotted red; 
 
}

<canvas id="canvas" style="width: 150px; height: 100px;"></canvas>

Question1：なぜキャンバスの全体150ピクセルはカバーされませんか？キャンバスタグにwidth="150"とheight="100"の属性を追加すると、なぜキャンバス全体が塗りつぶされますか？

質問2：以下のスクリプトc.widthは300pxではなく、150pxを返します。なぜですか？

var c = document.getElementById("canvas"); 
 
var ctx = c.getContext("2d"); 
 

 

 
console.log(c.width); 
 
console.log(c.height);

canvas { 
 
    border: 1px dotted red; 
 
}

<canvas id="canvas" style="width: 150px; height: 100px;"></canvas>

Question3：ビューボックスをSVGのようなもののために、この動作は？

Answer 1

インラインスタイリングが動作していない私はなぜわからないんだけど、あなたはこれまであなたのcanvas要素を変更した場合：

<canvas id="canvas" width="150px" height= "100px;"></canvas> 

するとコンソールは正しい値を記録し、勾配がキャンバスを埋めます。 :)なぜ私はあなたが他の方法を使うことができないのか分かりませんが、どこでも私が見たことは、HTMLキャンバスを使用するすべての人がこの方法で幅と高さを指定していると思います。 （彼らはJavaScriptでそれを指定しない限り）

はここにあなたの作業コードのペンです：https://codepen.io/Awesomennjawarrior/pen/zwmmPY