title: Why is canvas arc not circular?
body: <p>In JSFiddle, I create an arc using the standard syntax and it creates a long skinny elips. I found out that the css I am applying is dictating it's dimensions and not the canvas. Why is this?</p>
  
  <p>JSFiddle: <a href="https://jsfiddle.net/jey2fodj/2/" rel="nofollow noreferrer">https://jsfiddle.net/jey2fodj/2/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id='drawSpace'&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>.circle {
    height: 100px;
    width: 100px;
    border: 1px solid black;
  }
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>var c = document.createElement('canvas');
  c.className = 'circle';
  
  var ctx = c.getContext("2d");
  ctx.beginPath();
  ctx.arc(50,50,50,0,3*Math.PI);
  ctx.stroke();
  
  document.getElementById('drawSpace').appendChild(c);
  </code></pre>
  
  <p>Go ahead and change the width/height for the style to help understand the question. Thank you.</p>