呈现文本（Chrome）时，SVG和画布之间的差异很小

Question

我正在将SVG文本转换为画布渲染，但是在比较两个文本时发现有细微差别（仅在Chrome上）

这是我用来进行转换的示例代码

// this svg code is normally calculated dynamically
var svg_code = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -272 501 336" width="501" height="336">
    <text font-size="300" font-family="'Arial'" fill="#f00" x="0" y="0" text-anchor="middle">
        <tspan x="50%" dy="0">123</tspan>
    </text>
</svg>`;

document.getElementById('content').innerHTML = svg_code;


var img = new Image();
img.src = "data:image/svg+xml; charset=utf8, " + 
    encodeURIComponent(svg_code.replace('fill="#f00"', 'fill="#0f0"'));

img.onload = function() {
  var canvas = document.createElement("canvas");
  canvas.id = "canvas";
  canvas.width = 501;
  canvas.height = 336;
  var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight);
  document.getElementById('content').appendChild(canvas);
}

JSFiddle

下面的屏幕截图显示了红色文本（SVG）和绿色文本（画布）

虽然不多，但是我正在使用图像修剪SVG文本，因此它必须是像素完美的

这里还有另一个JSFiddle使用另一种字体

如何解决或避免这种差异？

信息：
这是由画布硬件加速（“加速的2D画布” Chrome标志）引起的

Chrome错误 https://bugs.chromium.org/p/chromium/issues/detail?id=1037834