What causes blurry text in a web game from the wrong device pixel ratio?

The canvas backing store is sized in CSS pixels while the display has more physical pixels, so the browser upscales the rendered image and text looks soft.

How do I catch this when it only happens for some players?

Capture it automatically from the player's device with the full stack trace, the device and OS, the build, and a breadcrumb trail of what they did. That turns a vague complaint into a specific, reproducible issue you can fix without owning the hardware it happens on.

How to Fix Blurry Text in a Web Game From the Wrong Device Pixel Ratio

Quick answer: Set the canvas width and height to the CSS size times devicePixelRatio, scale the drawing context by the same factor, and keep the CSS size unchanged.

Your canvas game looks sharp on a standard monitor but text is fuzzy on a retina laptop or phone. You are rendering at CSS resolution and the browser is scaling up. Match the backing store to the physical pixels.

How to fix it

1. Scale the backing store

Set canvas.width = cssWidth * devicePixelRatio and likewise for height, while keeping the CSS width/height for layout, so each physical pixel maps to a real rendered pixel.

2. Scale the context

Call ctx.scale(devicePixelRatio, devicePixelRatio) so your drawing coordinates stay in CSS units while output uses the full resolution, keeping text crisp.

3. React to ratio changes

Recompute on resize and when the window moves between monitors with different ratios, since devicePixelRatio can change at runtime.

Catching the ones you can't reproduce

The hardest version of this to fix is the one you can't reproduce — it only happens on a player's hardware, OS, driver, or save state, under conditions that simply aren't present on your machine. A report that says “it crashed” or “it froze” gives you nothing to act on, so the bug survives release after release while quietly costing you players.

Automatic error capture closes that gap. Each failure arrives with its full stack trace, the device and OS, the build number, and a breadcrumb trail of what the player did right before it broke, so even a failure you have never seen becomes a specific, reproducible issue. Fold identical failures into one signature ranked by how many players each hits, and your worklist sorts itself worst-first instead of arriving as a stream of vague complaints.

This is where a tool like Bugnet earns its place. Its SDK captures every HTML5 error automatically with the full stack trace plus device, OS, memory, build, and game-state context, folds duplicates into one grouped issue with an occurrence count, and ties each to the build it first appeared on — so you fix the problem that hurts the most players first and confirm it is gone when its signature disappears from the next release.

Ship the fix, watch the signature disappear from the next build. That's how you know it's really gone.