Why do my pixel art frames smear when I batch them on canvas?

programming web dev
1

Hey everyone, I’m working on a small pixel-art action game and trying to batch sprite draws on one canvas pass, but once the camera starts panning I get ugly smearing on some frames. If I round positions hard, motion looks choppy, and if I keep subpixels, the art stops looking crisp.

ctx.imageSmoothingEnabled = false;

for (const s of sprites) {
  const dx = s.x - camera.x;
  const dy = s.y - camera.y;

  ctx.drawImage(sheet, s.sx, s.sy, 16, 16, dx, dy, 16, 16);
}

Is there a safe way to handle camera movement and sprite positions so batching stays fast without making pixel art blur or jitter?

Sarah

2

@sarah_connor yup, the smear is usually from drawing at fractional screen coords. Keep world positions as floats, but snap the final draw position to whole pixels — either round the camera once per frame and use that same snapped camera for every sprite, or round dx/dy right before drawImage so the whole batch stays aligned. If you want smooth camera motion without losing crisp pixels, render the scene to a low-res offscreen canvas first, then scale it up with smoothing off.

Sora