Canvas设置极小ctx.lineWidth时Chrome与Firefox渲染差异如何解决

问题现象 #

Canvas绘图开发中设置ctx.lineWidth = 0.06的极小线宽时，Windows 10环境下Chrome/Edge（Chromium内核）与Firefox渲染效果存在明显差异，目标是实现Firefox呈现的颗粒质感渲染效果，两者效果对比如下：

原有实现代码如下：

const canvas = document.querySelector('canvas'), ctx = canvas.getContext('2d');

var cw = canvas.width = canvas.height = Math.min(window.innerWidth, window.innerHeight);
ctx.fillStyle = '#000000'; ctx.fillRect(0, 0, cw, cw);
var u = cw / 1000;
var cx = 500 * u, cy = 500 * u;
var colorsP = [['304B5D','B48B35'],['3B999F','E5C91C'],['854B68','B9602B'],['AF1D16','779C3C'],['9E4EB3','F1D628'],['6B2142','DF748A'],['663388','AA6600'],['BBDFD5','E9D038'],['304350','D9B15C'],['99BC44','274140'],['4A122F','90181A'],['184299','24B885'],['B84224','D28928'],['CD4316','E5D03C'],['826071','D77D48'],['DF7D36','5065A8'],['B0244B','D39639'],['CE2C14','91A86D'],['A16DAF','D1C578'],['42408C','D4455E'],['481F31','F28FA3'],['334E94','7C85B0'],['1C3982','4175AC']];

var colors = randomItem(colorsP);
colors.push('FFFFFF','000000','000000');

// Origins
for (let i = 1; i <= 100; i++) {
    let color = colors[randomNumber(0, colors.length - 1)];
    
    // Points
    let points = [];
    for (let j = 1; j <= 60; j++) {
        let x = j * j * randomNumber(240, 860) * u;
        let y = j * j * randomNumber(240, 860) * u;
        points.push([x,y]);
    }
    
    // Rotations
    for (let j = 1; j <= 200; j++) {
        ctx.beginPath(); ctx.moveTo(points[0][0], points[0][1]); for (let k = 1; k < points.length; k++) ctx.lineTo(points[k][0], points[k][1]); ctx.lineWidth = 0.06; ctx.strokeStyle = '#'+color; ctx.stroke();
        ctx.translate(cx, cy); ctx.rotate(0.5 * Math.PI / 180); ctx.translate(-cx, -cy);
    }
}

function randomItem(arr) { return arr[Math.floor(Math.random() * arr.length)]; }
function randomNumber(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); }

差异原因 #

渲染不一致来自两个浏览器内核对亚像素线宽的抗锯齿实现逻辑区别：

• Chromium内核对小于0.1px的线宽会做强制最小线宽钳制+统一alpha计算，最终渲染出连续平滑的线条，直接丢失颗粒感
• Firefox不会做这类强制钳制，亚像素线段多次叠加时，会因为像素覆盖率的随机波动自然形成离散的颗粒质感

修复方案 #

不要依赖浏览器原生的极小线宽渲染逻辑，手动模拟Firefox的颗粒生成规则即可实现全浏览器效果一致：

1. 初始化Canvas时关闭默认图像平滑，避免Chromium自动做亚像素插值平滑：

   ctx.imageSmoothingEnabled = false;
   

2. 放弃使用小于0.5px的lineWidth描边，改为在路径采样点上绘制1px大小、带随机透明度的点，模拟亚像素叠加的颗粒感，替换原有stroke逻辑：

   ctx.beginPath();
   ctx.moveTo(points[0][0], points[0][1]);
   for (let k = 1; k < points.length; k++) {
       ctx.lineTo(points[k][0], points[k][1]);
   }
   // 沿路径采样绘点
   const sampleCount = 2000;
   ctx.fillStyle = '#'+color;
   for (let s = 0; s < sampleCount; s++) {
       const t = s / sampleCount;
       const segIdx = Math.min(Math.floor(t * (points.length-1)), points.length-2);
       const segT = (t * (points.length-1)) % 1;
       const x = points[segIdx][0] * (1-segT) + points[segIdx+1][0] * segT;
       const y = points[segIdx][1] * (1-segT) + points[segIdx+1][1] * segT;
       ctx.globalAlpha = 0.03 + Math.random() * 0.05;
       ctx.fillRect(Math.round(x), Math.round(y), 1, 1);
   }
   ctx.globalAlpha = 1;
   

3. 可选优化：给每个采样点添加±0.5px范围内的随机坐标偏移，进一步还原Firefox渲染里亚像素落点随机带来的自然颗粒感。

该方案完全不依赖浏览器原生线宽抗锯齿逻辑，所有内核下渲染效果完全一致，性能和原实现差距在可接受范围内。

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