Chrome94与95版本Canvas绘制线条异常bug的规避方案咨询

Chrome 94、95版本在Canvas绘制场景下存在已知渲染bug：当绘制路径包含绝对值过大的坐标、同时设置了上下文变换矩阵时，会出现线段绘制异常的问题，和Safari等其他浏览器的标准绘制结果不一致。

可行规避方案 #

• 方案1：坐标等比缩放预处理
  该方案对业务逻辑侵入最小，且能保证渲染效果和原有逻辑完全一致。核心逻辑是：将路径所有坐标等比缩小N倍，同时将setTransform的缩放参数对应放大N倍，两者乘积不变所以最终渲染效果一致，缩小后的路径坐标可以避开超大坐标触发的Chrome渲染异常。
  参考修改代码：

  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  // 可根据实际坐标大小调整缩放偏移值，保证处理后坐标最大值低于10000即可
  const scaleOffset = 10;
  ctx.setTransform(2 * scaleOffset, 0, 0, 2 * scaleOffset, 0, 0);
  
  const arr = [
        ["moveTo",7,209],
        ["lineTo",6318,403],
        ["lineTo",15786,453],
        ["lineTo",18942,451],
        ["lineTo",22098,28]
  ];
  ctx.beginPath();
  arr.forEach(item => {
        // 坐标提前缩小对应倍数
        const x = item[1] / scaleOffset;
        const y = item[2] / scaleOffset;
        if (item[0] === 'lineTo') {
            ctx.lineTo(x, y);
        } else if (item[0] === 'moveTo') {
            ctx.moveTo(x, y);
        }
  })
  ctx.strokeStyle = 'red'
  ctx.stroke();
  

  HTML部分无需修改：

  <canvas
      id="canvas"
      width=800
      height=800
     style="width: 400px; height: 400px"
  >
  </canvas>
  

• 方案2：分段绘制路径
  将跨度较大的超长路径拆分为多段短路径，每段绘制前重新调用beginPath()，避免单条路径的坐标范围过大触发渲染异常。
• 方案3：升级浏览器版本
  该bug在Chrome 96及以上版本已经被官方修复，如果业务场景允许引导用户升级浏览器，是成本最低的解决方案。
• 方案4：关闭硬件加速
  仅适用于用户端手动操作场景，在Chrome设置中关闭硬件加速后重启浏览器即可恢复正常绘制，不适合面向普通用户的线上产品。

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