The Chrome browser has obvious bugs in Canvas drawing. the following code

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

the result in Chrome94 is like this: Chrome94&95

the same code in Safari is like this: Safari

So is there anyway to avoid this bug in chrome?

CodePudding user response：

This bug has already been fixed in latest Canary 97.

This is clearly a rounding issue with your huge coordinates. So to avoid it, avoid using that big coordinates if you can.

Otherwise if you really must use a workaround, you can force the canvas to use software rendering. But this will slow down your canvas entirely and should be avoided as much as possible.

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

So the best would be to try to reproduce the bug and check before hand if you are on a buggy browser:

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 );

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

And now you can apply the workaround conditionnaly:

Show code snippet

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>

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>