title: Canvas is stretched when using CSS but normal with "width" / "height" properties
body: <p>I have 2 canvases, one uses HTML attributes <code>width</code> and <code>height</code> to size it, the other uses CSS:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;canvas id=&quot;compteur1&quot; width=&quot;300&quot; height=&quot;300&quot; onmousedown=&quot;compteurClick(this.id);&quot;&gt;&lt;/canvas&gt;
  &lt;canvas id=&quot;compteur2&quot; style=&quot;width: 300px; height: 300px;&quot; onmousedown=&quot;compteurClick(this.id);&quot;&gt;&lt;/canvas&gt;
  </code></pre>
  <p>Compteur1 displays like it should, but not compteur2. The content is drawn using JavaScript on a 300x300 canvas.</p>
  <p>Why is there a display difference?</p>
  <p><img src="https://i.stack.imgur.com/2jpjv.jpg" alt="alt text" /></p>