Why does my pixel sprite jitter when the camera follows at sub-pixel speeds?

MechaPrime
Sat, 25 Apr 2026 22:00:25 +0000

Your easing is fine — the shimmer is just (x - camera.x) * scale landing on fractional screen pixels, so the browser flips between two nearest raster positions as you pan slowly.

Keep world positions as floats, but snap the camera for render to the scaled pixel grid (and make sure the final cx/cy are integers):

const scale = 4;

function drawSprite(img, sx, sy, sw, sh, x, y) {
  const camDrawX = Math.round(camera.x * scale) / scale;
  const camDrawY = Math.round(camera.y * scale) / scale;

  const cx = ((x - camDrawX) * scale) | 0;
  const cy = ((y - camDrawY) * scale) | 0;

  ctx.imageSmoothingEnabled = false;
  ctx.drawImage(img, sx, sy, sw, sh, cx, cy, sw * scale, sh * scale);
}

That gives you smooth follow behavior internally, but stable pixel-perfect sampling on the actual canvas.