在 Firefox 中缩放画布上的文本看起来很糟糕答案

【问题标题】：Scaling text on canvas in Firefox looks horrible在 Firefox 中缩放画布上的文本看起来很糟糕
【发布时间】：2018-03-14 19:20:49
【问题描述】：

似乎 Firefox 在缩放画布上的文本方面做得很差。看看这个：

ctx.font = "12pt arial";
ctx.fillText("Today, however, the Scottish contributed", 10, 20);

ctx.scale(3, 3);
ctx.font = "4pt arial";
ctx.fillText("Today, however, the Scottish contributed", 10/3, 20);

结果：

这是与 Chrome 的比较，两者都具有缩放功能。后者在这里做得很好。

Codepen：https://codepen.io/anon/pen/OvMGaK

您不必成为渲染狂人就能注意到差异。 这是一个已知问题吗？我该如何解决？

【问题讨论】：

简单的解决方法是缩小而不是放大。
无法在... Android 上复制。如果禁用硬件加速会怎样？无论如何，bugzilla 有一个非常强大的搜索引擎，而 mozilla 的搜索引擎应该能够告诉你它是否是一个已知问题。如果不能随意打开问题，请不要忘记包含您的规范。

标签： canvas html5-canvas

【解决方案1】：

我正在运行 Firefox 59.0，这似乎不再是问题，所以我只是建议更新您的浏览器来解决这个问题。但是，根据 mozilla documentation，如果没有为 fillText 指定第四个参数 max-width，那么它将尝试使用可能的最小宽度，这可能会导致一些问题。如果问题在您的浏览器版本中仍然存在，那么您可能需要尝试更改字母间距。这可以通过这样说来完成：

ctx.canvas.style.letterSpacing = "5px";

这是一个非常 hacky 的解决方案，因为它涉及更改画布元素本身的字母间距，虽然它有效，但它实际上不在文档中，因此不需要在所有浏览器上工作。最好的解决方案可能就是让您的浏览器保持更新和/或使用不同的字体。

【讨论】：

我在 60 个“开发版”和 59 个“标准”上得到了这个。与您所说的相反，文档解释说只有在设置 maxWidth 时才会发生有趣的事情。无论哪种方式，我都尝试了 letterSpacing 和 maxWidth 的想法，都没有什么不同。
很抱歉。我最初只是在我的 Mac 上进行测试，它似乎没有这个问题。但是，在启动 Ubuntu VM 后，我能够复制您的问题，这让我相信这可能是特定于平台的问题。无论如何，正如我在回答末尾提到的那样，其他字体（例如 Palantino）在缩放后似乎渲染得很好。我知道这可能不是解决您的问题的最佳方法，但如果特定字体不重要，这可能会解决您的问题。