CODEWITHSUNDEEP
javascripthtmlreactjscanvashtml5-canvas
kai
kai

Reputation: 83

HTML canvas disappears in Chrome after browser window/tab becomes inactive

My canvas element works perfectly fine except when tested in Chrome on a Mac running MacOS 12.2, where the canvas content gets completely wiped out when I

... even though the canvas tag still remains in the DOM. I was able to reproduce this with some websites using canvas (e.g. https://minexmr.com/poolstats) but not others. Cannot reproduce it in other browsers.

Is there anything I can do to prevent this from happening or is this an issue with Chrome? There appears to be similar complaints from a few years ago.

React code snippet

const canvasRef = useRef(null);

useEffect(() => {
  if (canvasRef && canvasRef.current && canvasRef.current.getContext) {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');

    if (ctx) {
      ctx.fillStyle = 'red';
      ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    }
  }
}, [])

return (
  <>
    ...
    <canvas ref={canvasRef} width="1000" height="200">
      Fallback text
    </canvas>
    ...
  </>
);

Upvotes: 8

Views: 2736

Answers (1)

Kaiido
Kaiido

Reputation: 136746

This is caused by https://crbug.com/1268146 where they are trying to free the resources held by canvases in background pages. Note that to reproduce this bug you must have the chrome://flags#enable-experimental-web-platform-features flag on.
The context is supposed to be restored back when the document gains focus again, but obviously this part was failing as the context is just wiped out entirely.
They now hide this feature even more and thus the new Canary doesn't expose this issue anymore.

Given that this is all behind dev flags, few of your users should face it, and it's probably not worth the effort to implement a workaround for it.
But if you really need one, you can create an ImageBitmap in the visibilitychange event and do the restore yourself:

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 40, 40);
let bmp;
document.onvisibilitychange = async(evt) => {
  if (document.visibilityState === "hidden") {
    bmp = await createImageBitmap(canvas);
  } else {
    ctx.globalCompositeOperation = "copy";
    ctx.drawImage(bmp, 0, 0);
    ctx.globalCompositeOperation = "source-over";
  }
};
<canvas></canvas>

I added a comment on the issue to let them know that the restoring fails in case they come back to it.

Upvotes: 9

Related Questions