title: Canvas in basic HTML page always sized as 300x150.
body: <p>I have simplified my issue to a basic HTML document with a <code>&lt;canvas&gt;</code> element:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
  
      &lt;style&gt;
        body {
          border: 1px solid #ff5500;
          background-color: black;
        }
        canvas {
          width: 100%;
          height: 100%;
        }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
   &lt;canvas id="canv" style='width:1024px;height:768px'&gt;
    &lt;/canvas&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>But however I set  the <code>width</code> and <code>height</code> (using pixels, percentages or viewport units), whether or not I set the style (e.g. <code>style='width:1024px;height:768px'</code>), and however I resize the browser window, the dev console always reports width x height as 300x150.   Why is this, and how do I deal with it?</p>
  
  <p>Here's the output from the dev console:</p>
  
  <pre><code>var c = document.getElementById("canv");
  undefined
  c.style.width
  "1024px"
  c.style.height
  "768px"
  c.width
  300
  c.height
  150
  </code></pre>
  
  <p>The same behaviour occurs in both Chromium and Firefox.</p>
  
  <p>I have trawled Stack Overflow and the web in general and found much on the difference between <code>width</code> and <code>clientWidth</code>, and a similar question regarding Fabric.js, but no answer to this specific question.</p>