Chrome94&95 canvas 错误

Question

Chrome 浏览器在 Canvas 绘图中有明显的错误。以下代码

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.setTransform(2, 0, 0, 2, 0, 0);
ctx.beginPath();

const arr = [
      ["moveTo",7,209],
      ["lineTo",6318,403],
      ["lineTo",15786,453],
      ["lineTo",18942,451],
      ["lineTo",22098,28]
];
ctx.beginPath();
arr.forEach(item => {
      if (item[0] === 'lineTo') {
          ctx.lineTo(item[1], item[2]);
      } else if (item[0] === 'moveTo') {
          ctx.moveTo(item[1], item[2]);
      }
})
ctx.strokeStyle = 'red'
ctx.stroke();

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

Chrome94 中的结果是这样的： Chrome94&95

同样的代码在Safari中是这样的： Safari

那么有什么方法可以避免 chrome 中的这个错误？

Answer 1

此错误已在最新的 Canary 97 中修复。

这显然是您巨大坐标的舍入问题。因此，为了避免它，请尽可能避免使用那么大的坐标。

否则，如果您真的必须使用变通方法，您可以强制 canvas 使用软件渲染。但这会完全降低您的 canvas 速度，应尽可能避免。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d', {
  willReadFrequently: true // force software rendering (in 95+?)
});

ctx.setTransform(2, 0, 0, 2, 0, 0);
ctx.beginPath();

const arr = [
      ["moveTo",7,209],
      ["lineTo",6318,403],
      ["lineTo",15786,453],
      ["lineTo",18942,451],
      ["lineTo",22098,28]
];
ctx.beginPath();
arr.forEach(item => {
      if (item[0] === 'lineTo') {
          ctx.lineTo(item[1], item[2]);
      } else if (item[0] === 'moveTo') {
          ctx.moveTo(item[1], item[2]);
      }
})
ctx.strokeStyle = 'red';
// in case willReadFrequently didn't make it
if (ctx.getContextAttributes && !ctx.getContextAttributes().willReadFrequently) {
  ctx.getImageData(0, 0, 1, 1);
}
ctx.stroke();

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

所以最好是尝试重现该错误并事先检查您是否使用有问题的浏览器：

const isBuggyBrowser = (() => {
  const ctx = document.createElement("canvas").getContext('2d');
  // move the bug toward the top left corner
  ctx.setTransform(2, 0, 0, 2, -900, -900);
  // removed some fluff
  const arr = [
    [7,209],
    [6318,403],
    [15786,453],
    [18942,451],
    [22098,28]
  ];
  // lineTo from an empty subpath is auto-converted to moveTo
  arr.forEach(([x,y]) => ctx.lineTo(x, y));
  ctx.stroke();
  // not transparent
  return !!ctx.getImageData(0, 1, 1, 1).data[3]
})();
console.log( "is your browser buggy?", isBuggyBrowser );

现在您可以有条件地应用解决方法：

const isBuggyBrowser = (() => {
  const ctx = document.createElement("canvas").getContext('2d');
  // move the bug toward the top left corner
  ctx.setTransform(2, 0, 0, 2, -900, -900);
  // removed some fluff
  const arr = [
    [7,209],
    [6318,403],
    [15786,453],
    [18942,451],
    [22098,28]
  ];
  // lineTo from an empty subpath is auto-converted to moveTo
  arr.forEach(([x,y]) => ctx.lineTo(x, y));
  ctx.stroke();
  // not transparent
  return !!ctx.getImageData(0, 1, 1, 1).data[3]
})();

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d', {
  willReadFrequently: isBuggyBrowser
});

ctx.setTransform(2, 0, 0, 2, 0, 0);
ctx.beginPath();

const arr = [
      ["moveTo",7,209],
      ["lineTo",6318,403],
      ["lineTo",15786,453],
      ["lineTo",18942,451],
      ["lineTo",22098,28]
];
ctx.beginPath();
arr.forEach(item => {
      if (item[0] === 'lineTo') {
          ctx.lineTo(item[1], item[2]);
      } else if (item[0] === 'moveTo') {
          ctx.moveTo(item[1], item[2]);
      }
})
ctx.strokeStyle = 'red';
// in case willReadFrequently didn't make it
if (isBuggyBrowser && ctx.getContextAttributes &&
    !ctx.getContextAttributes().willReadFrequently) {
  ctx.getImageData(0, 0, 1, 1);
}
ctx.stroke();

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

Chrome94&95 canvas 错误

Chrome94&95 canvas bug

html

javascript

google-chrome

canvas