JavaScript画布文本比率

我有一个固定大小的画布（850x400px），当我向这个画布添加文本时，它会以一种奇怪的方式放大，我不知道为什么

如果我没有将画布设置为特定的高度/宽度，则文本显示正常，这是为什么

export function addText() {
  var canvas = document.getElementById("canvas"); // 850x400px
  var ctx = canvas.getContext("2d");
  var y = 1 * 20 + 20;

  var text = {
    text: "ABC",
    x: 20,
    y: y
  };

  ctx.font = "40px consolas";
  text.width = ctx.measureText(text.text).width;
  text.height = 80;
  ctx.fillText(text.text, text.x, text.y);
}

这就是画布字段中的文本的外观：

---

如何插入按常规40px字体缩放的文本？

我想您尚未指定画布HTML元素本身的宽度和高度，请尝试：

addText（）；
函数addText（）{
var canvas=document.getElementById（“canvas”）；//850x400px
var ctx=canvas.getContext（“2d”）；
变量y=1*20+20；
变量文本={
文本：“ABC”，
x:20，
y:y
};
ctx.font=“40px控制台”；
text.width=ctx.measureText（text.text）.width；
text.height=80；
ctx.fillText（text.text，text.x，text.y）；
}

---

设置为宽度：100%，高度：100%，在我的例子中是450x850。如果在css类中设置，这可能是问题的原因。我已经解决了这个问题，我提出了几乎相同的解决方案：

ctx.canvas.width=$（“#imageFrame'）.width（）

和

ctx.canvas.height=$（'#imageFrame'）.height（）帧是父元素。