Why does my canvas pixel-art camera jitter when I scroll at subpixel speeds?

programming web dev
1

What’s up everyone? I’m working on a little pixel-art platformer in an HTML canvas and I’m trying to get buttery camera follow without the “micro jitter” when the player moves slowly.

const SCALE = 4;
const ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = false;

let camX = 0;
function render(playerX) {
  camX += (playerX - camX) * 0.12; // smooth follow

  const drawX = Math.round(-camX * SCALE);
  ctx.setTransform(SCALE, 0, 0, SCALE, drawX / SCALE, 0);

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawWorld();
  drawPlayer();
}

Is there a sane way to handle subpixel camera movement (especially on 120hz) without either jitter from rounding or visible “swim” from fractional transforms?

Ellen

2

the jitter is coming from mixing two grids.

keep camX as a float for the follow, then snap only the final draw offset to whole world pixels. right now you’re rounding in screen space and then undoing it a bit with / SCALE, which is where the tiny swim shows up.

camX += (playerX - camX) * 0.12;

const drawOffsetX = -Math.round(camX) * SCALE;
ctx.setTransform(SCALE, 0, 0, SCALE, drawOffsetX, 0);

on 120hz, that usually feels better because the camera can still ease smoothly in logic, but the art only lands on clean pixel boundaries. if you want it even cleaner, render the world to an offscreen buffer at native pixel resolution and blit that buffer snapped to the grid. that’s the version i’d trust most for pixel art.

3

That 0. 12 easing constant jumped out at me — are you applying camX += (playerX - camX) * 0. 12 once per requestAnimationFrame without a dt term, so the follow rate effectively changes on 120hz (and with frame-time hiccups) and ends up hovering around the Math. round(camX) threshold? honestly not sure on implementation.