Firefox与Chrome中HTML Canvas fillRect及fontBoundingBoxAscent行为差异排查

开发Leaflet库时遇到跨浏览器兼容问题：Chrome中标签的背景色和文字显示正常，但Firefox里仅文字显示，标签背景未渲染。

效果对比 #

• Chrome正常效果：
  
• Firefox异常效果：
  

原问题代码 #

drawLabel(labelText, textColor, backgroundColor, labelPosition) {
  const textWidth = this.ctx.measureText(labelText).width;
  const textHeight = this.ctx.measureText(labelText).fontBoundingBoxAscent;

  // Calculate label xy position
  const labelX = labelPosition.x;
  const labelY = labelPosition.y;
  this.ctx.fillStyle = backgroundColor;
  // Magic numbers will centre the rectangle over the text
  this.ctx.fillRect(labelX - textWidth / 2 - 1, labelY - textHeight + 1, textWidth + 3, textHeight + 2);
  this.ctx.fillStyle = textColor;
  this.ctx.fillText(labelText, labelX - textWidth / 2, labelY);
}

问题根源 #

核心原因是fontBoundingBoxAscent属性的兼容性问题：它属于Canvas API的实验性属性，Firefox对其支持不完善，多数场景下会返回0或无效数值，导致计算出的fillRect位置、尺寸错误，最终看起来像是fillRect未生效。

修复方案 #

改用兼容性更好的文本高度计算方式，以下两种方案均可解决问题：

方案1：使用actualBoundingBox系列属性（推荐）

actualBoundingBoxAscent和actualBoundingBoxDescent是更稳定的标准属性，几乎所有现代浏览器都支持，结合两者可准确获取文本总高度：

drawLabel(labelText, textColor, backgroundColor, labelPosition) {
  const textMetrics = this.ctx.measureText(labelText);
  const textWidth = textMetrics.width;
  // 计算文本实际总高度（上升高度+下降高度）
  const textHeight = textMetrics.actualBoundingBoxAscent + textMetrics.actualBoundingBoxDescent;

  const labelX = labelPosition.x;
  const labelY = labelPosition.y;
  this.ctx.fillStyle = backgroundColor;
  // 调整背景框的位置，确保完全覆盖文本
  const rectX = labelX - textWidth / 2 - 1;
  const rectY = labelY - textMetrics.actualBoundingBoxAscent + 1;
  this.ctx.fillRect(rectX, rectY, textWidth + 3, textHeight + 2);
  
  this.ctx.fillStyle = textColor;
  this.ctx.fillText(labelText, labelX - textWidth / 2, labelY);
}

方案2：固定字体大小计算（适用于字体大小已知的场景）

如果标签使用固定字体大小，可直接用字体大小作为文本高度基准，避免依赖文本度量属性：

drawLabel(labelText, textColor, backgroundColor, labelPosition) {
  const textWidth = this.ctx.measureText(labelText).width;
  // 替换为你的实际字体大小，比如14px
  const fontSize = 14;
  const textHeight = fontSize;

  const labelX = labelPosition.x;
  const labelY = labelPosition.y;
  this.ctx.fillStyle = backgroundColor;
  // 微调y轴偏移量，确保背景框与文字对齐
  this.ctx.fillRect(labelX - textWidth / 2 - 1, labelY - textHeight + 3, textWidth + 3, textHeight + 2);
  
  this.ctx.fillStyle = textColor;
  this.ctx.fillText(labelText, labelX - textWidth / 2, labelY);
}

额外注意事项 #

确保Canvas上下文的textBaseline属性保持一致（默认值为alphabetic），若代码中修改过该属性，需同步调整背景框的位置计算逻辑，避免跨浏览器对齐偏差。

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