title: Difference between HTML width attribute and CSS width property (canvas)?
body: <p>I was trying to draw a circle in the canvas when I noticed something strange - basically when I defined the canvas' dimensions by CSS, the element went out of scale - like it looked "squished". </p>
  
  <p>But if I set the dimensions though the "width" and "height" HTML attributes, it rendered normally. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  
    function highlightAreaTrial(elementId, x, y, radius) {
      console.log("x, y: " + x + ", " + y);
      canvas = document.getElementById(elementId);
      ctx = canvas.getContext('2d');
      ctx.beginPath();
      ctx.arc(x, y, radius, 0, 2*Math.PI);
      ctx.strokeStyle="#FF0000";
      ctx.stroke();
    }
  
    highlightAreaTrial("trial", 50, 50, 20);
    highlightAreaTrial("myCanvas", 50, 50, 20);
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;canvas id="trial" style="height: 100px; width: 100px; border: 1px solid black;"&gt;&lt;/canvas&gt;
      
  &lt;canvas id="myCanvas" width="100" height="100" style="border:1px solid #d3d3d3;"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's a fiddle: <a href="https://jsfiddle.net/codeapprenti/vnoukemm/" rel="nofollow">https://jsfiddle.net/codeapprenti/vnoukemm/</a></p>
  
  <p>Can someone explain this behaviour? </p>
  
  <p>Thanks. </p>