如何让Canvas arc方法在Firefox与Chrome表现一致？兼容方案与规范判定

问题背景 #

当使用Canvas绘制圆形且lineWidth大于半径时，Chrome中填充区域与描边之间会出现空白间隙，而Firefox及Chromium中描边会直接覆盖填充区域。

规范判定 #

根据HTML Canvas 2D Context规范，描边应当覆盖在填充区域之上，Firefox和Chromium的表现符合规范。Chrome的空白间隙属于浏览器实现偏差——当描边宽度远大于图形半径时，Chrome渲染引擎的路径计算或裁剪逻辑出现问题，导致描边未正确覆盖填充区域。

兼容方案（让Chrome实现Firefox表现） #

无需复杂Polyfill，通过调整绘制逻辑即可实现兼容：

方案1：调换描边与填充顺序 #

先执行描边再填充，利用填充覆盖描边的内层区域，最终视觉效果与Firefox一致：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.lineWidth = 200;
ctx.fillStyle = "red";
ctx.strokeStyle = ctx.fillStyle; // 确保描边与填充颜色一致

ctx.arc(250, 250, 30, 0, 2 * Math.PI);

ctx.stroke(); // 先描边
ctx.fill();   // 再填充

方案2：使用全局合成模式 #

若需保留先填充后描边的顺序，可通过合成模式让描边绘制在填充下方：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.lineWidth = 200;
ctx.fillStyle = "red";
ctx.strokeStyle = ctx.fillStyle;

ctx.arc(250, 250, 30, 0, 2 * Math.PI);

ctx.fill();
ctx.globalCompositeOperation = "destination-over"; // 设置合成模式
ctx.stroke();
ctx.globalCompositeOperation = "source-over"; // 恢复默认模式

方案3：扩大填充路径半径 #

通过增大填充路径的半径，让填充区域覆盖描边内侧的空白：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

const lineWidth = 200;
const radius = 30;

ctx.lineWidth = lineWidth;
ctx.fillStyle = "red";
ctx.strokeStyle = ctx.fillStyle;

// 绘制描边路径
ctx.arc(250, 250, radius, 0, 2 * Math.PI);
ctx.stroke();

// 绘制扩大后的填充路径
ctx.beginPath();
ctx.arc(250, 250, radius + lineWidth/2, 0, 2 * Math.PI);
ctx.fill();

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