Firefox浏览器Canvas绘制超大半径圆形渲染错误问题

• 影响环境：Ubuntu Linux 系统下的 Firefox 100.0.2 版本
• 异常表现：使用 Canvas 2D API 绘制超大半径圆形时无法正常渲染
• 兼容对比：同一份代码在 Google Chrome、Microsoft Edge 浏览器中均可正常运行，预期绘制的圆形应当包含画布上标记的两个点位，但 Firefox 下实际渲染结果和预期存在明显偏差。

JavaScript 逻辑代码 #

const container = document.getElementById("mycanvas");
const canvas = document.createElement("canvas");
container.append(canvas);
canvas.style.border = "1px solid black";
canvas.width = 500;
canvas.height = 500;

const ctx = canvas.getContext("2d");
ctx.strokeStyle = "black";


ctx.beginPath();
ctx.arc(195, 66.36363636363637, 2, 0, 2*Math.PI);
ctx.stroke();

ctx.beginPath();
ctx.arc(286.57941279334176, 375.00999441910346, 2, 0, 2*Math.PI);
ctx.stroke();
          
ctx.beginPath();
ctx.arc(-74484.10354947454, 22392.54035201409, 77945.02340554907, 0, 2*Math.PI);
ctx.stroke();

HTML 页面结构 #

<!DOCTYPE html>
<html lang="en-US">
<head>
   <meta charset="utf-8">
   <title>Circle</title>
</head>
<body>
  <div id="mycanvas"></div>
</body>
</html>

问题原因：Firefox 的 Canvas 2D 渲染引擎在处理坐标、半径数值达到万级以上、远超出画布可视范围的路径时，内部浮点数计算和视口裁剪逻辑存在精度缺陷，会导致圆弧路径生成错位，最终渲染结果不符合预期。
规避方案：绘制这类圆心在可视区域外、半径极大的圆弧时，不要直接传入超大数值的坐标参数，先通过ctx.translate()做坐标平移，将当前绘制坐标系的原点偏移到画布可视区域附近，把传入绘制接口的坐标、半径数值控制在千级以内，即可规避该渲染bug，该写法在所有现代浏览器下均可兼容运行。

内容的提问来源于stack exchange，提问作者Filip Marić