Canvas is stretch when using CSS but normal with old "width" and "height" properties

Question

I have 2 canvas, one use old html "width" and "height" to size it, the other use CSS

<canvas id="compteur1" width="300" height="300" onmousedown="compteurClick(this.id);"></canvas>
<canvas id="compteur2" style="width: 300px; height: 300px;" onmousedown="compteurClick(this.id);"></canvas>

compteur1 display like it should, but not compteur2. the content is drawn using javascript on a 300x300 canvas.

why is there a display difference? Thanks!

Screenshot:

Answer 1

It seems that the width and height attributes determine the width or height of the canvas's coordinate system, whereas the CSS properties just determine the size of the box in which it will be shown.

(I do think they should make this just a bit clearer in the HTML5 spec...)