HTML Canvas fillText方法特定区域无法渲染文本是否为bug？

这不是代码逻辑错误，也不属于fillText的标准bug，是浏览器Canvas文本渲染管线的像素对齐优化和大缩放下浮点数精度问题共同导致的异常表现。
当你给Canvas上下文设置了800倍缩放、使用0.03px的极小逻辑字号时，浏览器为了保证文本渲染清晰度，会强制将填充文本的基线对齐到物理像素的整数边界，这个对齐操作是直接在最终屏幕像素空间执行的，不会保留逻辑坐标下的连续位置精度：

• 你传入的连续Y坐标转换到屏幕空间后，会被量化取整到最近的整数像素行，刚好落在两个量化阈值区间的坐标，就会出现水平方向的绘制空白条带
• 极小逻辑字号配合大缩放时，浏览器计算字形边界的浮点数精度会丢失，当Y坐标超过一定阈值后，栅格化系统会误判整个字形位于画布裁剪区域外，直接跳过渲染，这就是画布大面积区域无法绘制的原因
  strokeText和路径绘制走的是独立的栅格化管线，没有字体专属的基线强制对齐逻辑，所以不会出现该问题。

• 最优方案：不要在带大缩放的逻辑坐标空间直接渲染文本，绘制文本时临时重置变换矩阵，直接用物理像素坐标绘制，从根源绕开栅格对齐问题：

// 替换原有的mousemove监听回调即可
addEventListener("mousemove", event => {
  ctx.save();
  ctx.setTransform(1, 0, 0, 1, 0, 0); // 重置为像素空间的单位矩阵
  ctx.fillText(".", event.layerX, event.layerY); // 直接用鼠标的物理像素坐标绘制
  ctx.restore();
});

• 临时兼容方案：给传入fillText的Y坐标增加一个1/2物理像素对应的逻辑偏移（比如mouseY + 0.000625），打破量化取整的阈值，但该方案在不同浏览器、不同设备像素比下兼容性不稳定。
• 编码规范：避免在Canvas中使用小于1px的逻辑字号配合大缩放比渲染文本，所有浏览器的文本渲染管线对该场景的处理都存在精度问题。

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