动态创建Canvas时字体大小失效异常问题（重发）

这不是JS的缺陷，核心问题是你混淆了Canvas元素自身的width/height属性和CSS样式的width/height的区别：

• Canvas元素的width/height属性是绘图缓冲区的实际像素尺寸，决定了2D上下文的坐标系大小，默认值为300px×150px
• CSS的width/height只是控制Canvas在页面上的显示尺寸，浏览器会把绘图缓冲区的内容拉伸到这个显示尺寸

你动态创建Canvas时只设置了CSS样式的宽高，没有设置元素本身的width/height属性，导致绘图内容（包括字体）被按比例拉伸——窗口越大，你设置的CSS尺寸越大，缩放比例越高，字体看起来就越大。

而内联创建的Canvas同时明确设置了元素的width/height和CSS样式尺寸，两者一致，所以绘图内容不会被缩放，字体显示正常。

修正后的动态创建代码 #

<html>
<body>
<script>
var n=0, c=[], ct=[]
for (n=0; n<2; n++){
  const canvasSize = 400*n+70;
  c[n] = document.createElement('canvas');
  c[n].id = "C"+n;
  // 同时设置元素属性和CSS样式的宽高，保持一致
  c[n].width = canvasSize;
  c[n].height = canvasSize;
  c[n].style.width = canvasSize+"px";
  c[n].style.height = canvasSize+"px";
  c[n].style.border = "2px solid";
 
  document.body.appendChild(c[n]);
  ct[n] = c[n].getContext("2d");
  ct[n].font="30px Arial"
  ct[n].fillText("Hello",3,30)
}
</script></body></html>

内容的提问来源于stack exchange，提问作者EV123