Mi elemento de lienzo funciona perfectamente bien, excepto cuando se prueba en Chrome en una Mac con MacOS 12.2, donde el contenido del lienzo se borra por completo cuando
... a pesar de que la etiqueta del lienzo aún permanece en el DOM. Pude reproducir esto con algunos sitios web usando lienzo (por ejemplo, https://minexmr.com/poolstats ) pero no con otros. No se puede reproducir en otros navegadores.
¿Hay algo que pueda hacer para evitar que esto suceda o es un problema con Chrome? Parece que hay quejas similares de hace unos años.
Fragmento de código de reacción
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> ... </> );Esto es causado por https://crbug.com/1268146 donde intentan liberar los recursos que tienen los lienzos en las páginas de fondo. Tenga en cuenta que para reproducir este error debe tener activada la bandera chrome://flags#enable-experimental-web-platform-features.
Se supone que el contexto se restaurará cuando el documento vuelva a estar enfocado, pero obviamente esta parte estaba fallando ya que el contexto se eliminó por completo.
Ahora ocultan esta característica aún más y, por lo tanto, el nuevo Canary ya no expone este problema.
Dado que todo esto está detrás de las banderas de desarrollo, pocos de sus usuarios deberían enfrentarlo, y probablemente no valga la pena el esfuerzo de implementar una solución para ello.
Pero si realmente necesita uno, puede crear un ImageBitmap en el evento de cambio de visibilitychange y hacer la restauración usted mismo:
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>Agregué un comentario sobre el problema para informarles que la restauración falla en caso de que vuelvan a hacerlo.