When the Canvas Goes Black: WebGL Context Loss on Cheap Android Phones

A friend handed me an old Android phone last week with a web game frozen on a black rectangle. The HUD still updated — score, timer, a pause button — but the play field was gone and the console said nothing. A reload fixed it for four minutes.

That is what WebGL context loss looks like from outside. The driver decides it needs the memory back, the browser drops the context, and every gl call afterwards returns INVALID_OPERATION while the canvas holds its last frame or goes blank. On a 3 GB phone with a dozen tabs open it is routine.

Only the WebGL layer dies, which is the giveaway: a DOM overlay keeps repainting, so the bug reads as a rendering glitch rather than a lost context. I listen for it by name now, and preventDefault() is the line that makes a restore possible at all.

canvas.addEventListener('webglcontextlost', e => { e.preventDefault(); pauseRound(); });
canvas.addEventListener('webglcontextrestored', () => { rebuildTextures(); });

Forcing the drop takes patience: start the round, then open six heavy pages and let memory pressure build. A catalog such as d06 helps because several builds sit side by side, so canvases rotate without reloading the phone, and h5.zk7 works as a second surface since it allocates its own and gives up first.

Single-page releases are the lighter version of the same test. 8180 leaves little behind when a tab closes, while aa62 only fails once a second canvas of the same build is open. One surface per page is survivable; three is not.

What changed was the recovery path, not the phone's speed: builds such as ayuwin came back with a rebuilt texture cache instead of a full reload, so the round resumed where it stopped and players noticed only a two-second freeze.