What causes HTML5 canvas particles rendering blurry on high-DPI screens?

The canvas backing store is sized in CSS pixels, so on a high-DPI display the browser upscales it, blurring particles and misaligning their positions.

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 HTML5 Canvas Particles Looking Tiny or Blurry on High-DPI Screens

Quick answer: Set the canvas width/height to CSS size times devicePixelRatio, scale the 2D context by that ratio, and keep CSS size in layout pixels.

A canvas has a CSS size and a backing-store size; if they differ by the device pixel ratio, the browser scales the bitmap and everything blurs. Matching them fixes particle sharpness. Here is how.

How to fix it

1. Size the backing store

Set canvas.width = cssWidth * devicePixelRatio and the same for height, while keeping the CSS width/height at the layout size so the bitmap matches physical pixels.

2. Scale the context

Call ctx.scale(dpr, dpr) once after resizing so your particle coordinates stay in CSS pixels but render at full device resolution, keeping them crisp.

3. Re-handle resize and DPR changes

Recompute on window resize and when the page moves between monitors (the ratio can change), or particles drift and blur again after the display changes.

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.

Reproduce it once with full context and the fix writes itself. The hunt is the expensive part.