SVG转ImageBitmap绘制到Canvas时部分字号出现文字锯齿问题

这是Chrome内核的已知渲染缺陷，当使用createImageBitmap()处理嵌入自定义字体的SVG资源时，部分字号下会出现亚像素抗锯齿失效、alpha通道计算错误的问题，和硬件加速无关，可通过以下几种方案修复：

方案1：跳过ImageBitmap转换，直接绘制SVG Image到Canvas #

createImageBitmap不是必须的中间步骤，直接将加载完成的SVG图片对象绘制到canvas 2D上下文即可规避该bug：

替换图片生成函数：

const createImageFromSvg = async function(svgSrc) {
  const svgWithAssetsEmbedded = await _embedAssets(svgSrc);
  const svgBlob = new Blob([svgWithAssetsEmbedded], { type: "image/svg+xml;charset=utf-8" });
  const svgObjectUrl = URL.createObjectURL(svgBlob);
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => {
      URL.revokeObjectURL(svgObjectUrl);
      resolve(img);
    };
    img.onerror = reject;
    img.src = svgObjectUrl;
  });
};

调整渲染逻辑：

const renderCanvas = async function(canvas, svgSource, width, height, color) {
  canvas.width = width;
  canvas.height = height;
  const svgImg = await createImageFromSvg(svgSource);
  const ctx = canvas.getContext("2d");
  if (ctx) {
    ctx.fillStyle = color;
    ctx.strokeStyle = "#000000";
    ctx.lineWidth = 2;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.strokeRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(svgImg, 0, 0, canvas.width, canvas.height);
  }
};

方案2：强制SVG高精度渲染 #

如果必须保留createImageBitmap逻辑，可以在生成SVG的text节点上添加shape-rendering="geometricPrecision"属性，强制渲染器使用高精度几何计算，规避字号适配时的低精度渲染路径：
修改createSvg函数内的text节点代码：

<text x="0" y="50" font-family="Lobster" font-size="${fontSize}" shape-rendering="geometricPrecision">Hello World!</text>

方案3：超采样缩放 #

生成两倍分辨率的SVG，转位图后再缩放到目标尺寸，强制抗锯齿生效，适合对清晰度要求更高的场景。

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