使用CSS时画布会被拉伸，但是具有“ width” /“ height”属性的普通画布

Question

我有2个画布，一个使用HTML属性width并调整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画布上绘制的。

为什么会有显示差异？

Answer 1

似乎width和height属性确定了画布坐标系的宽度或高度，而CSS属性仅确定了将在其中显示框的大小。

该canvas元素有两个属性来控制元素的位图的大小：width和height。指定这些属性时，它们的值必须是有效的非负整数。必须使用解析非负整数的规则来获取其数值。如果缺少属性，或者解析其值返回错误，则必须使用默认值。该width属性默认为300，该height属性默认为150。