使用 CSS 时画布会拉伸，但使用“width”和“height”属性时画布会拉伸

我有 2 个画布，其中一个使用 HTML 属性width and height另一个使用 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 显示正常，但 compteur2 不显示。内容是使用 JavaScript 在 300x300 画布上绘制的。

为什么会有显示差异？

看来width and height属性决定画布坐标系的宽度或高度，而 CSS 属性仅决定显示画布的框的大小。

这在HTML规范 https://html.spec.whatwg.org/multipage/canvas.html#attr-canvas-width:

The canvaselement 有两个属性来控制元素位图的大小：width and height。这些属性在指定时必须具有以下值有效的非负整数. The 解析非负整数的规则必须用来获取它们的数值。如果缺少某个属性，或者解析其值返回错误，则必须使用默认值。这width属性默认为 300，并且height属性默认为 150。