title: Why doesn't fillRect cover whole canvas?
body: <p>I have a canvas tag without <code>width</code> and <code>height</code> attributes. The canvas has inline width and height. Now when I apply <code>linearGradient</code> over it, it doesn't cover whole canvas. Demo:  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>canvas {
    border: 1px dotted red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="canvas" style="width: 150px; height: 100px;"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Question1: Why doesn't whole 150px of canvas get covered? And if I add <code>width="150"</code> and <code>height="100"</code> attributes on canvas tag, why does it then fill whole canvas?  </p>
  
  <p>Question 2: In below script <code>c.width</code> returns <code>300px</code> not <code>150px</code>, why?  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var c = document.getElementById("canvas");
  var ctx = c.getContext("2d");
  
  
  console.log(c.width);
  console.log(c.height);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>canvas {
    border: 1px dotted red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="canvas" style="width: 150px; height: 100px;"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Question3: Is this behavior due to something similar to svg viewBox?</p>