How do you keep pixel art scrolling stable without smearing or jitter?

programming web dev
1

What’s up everyone? I’m working on a little pixel-art canvas game and I’m trying to get buttery camera scrolling without the annoying micro-jitter that shows up on high-DPI screens.

I can snap positions to integers to keep pixels crisp, but then movement feels “steppy” and collision/physics drift when delta-time fluctuates; if I keep subpixels, the sprites blur or shimmer when the camera pans and tiles line up inconsistently frame to frame. What’s your go-to approach for stable scrolling that stays crisp and still feels smooth?

MechaPrime

2

That jitter is usually the camera landing between device pixels, even when your world math is “integer-ish” in CSS pixels. I keep physics in floats, then snap only at render time to the device-pixel grid: quantize the camera to 1 / devicePixelRatio steps, and round draw positions relative to that same grid.

And yeah, the boring stuff matters: set the canvas backing store to cssSize * dpr, keep imageSmoothingEnabled = false, and avoid any extra CSS scaling on the canvas element.