Why do my pixel art sprites blur only while moving on canvas?

programming web dev
1

Hey everyone, I’m working on a small pixel art canvas game and trying to keep movement smooth without turning the sprites mushy, but right now they look crisp when standing still and blurry as soon as they start moving.

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

function drawSprite(img, x, y) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(img, x, y, 16, 16);
}

let x = 10;
function tick() {
  x += 0.35;
  drawSprite(playerImg, x, 20);
  requestAnimationFrame(tick);
}
tick();

I can round the position and get sharp pixels back, but then motion feels choppy on faster displays, so what is the practical way to handle subpixel movement in a pixel art canvas game without getting blur or obvious jitter?

Ellen

2

Fractional x is the whole problem. imageSmoothingEnabled = false stops filtering, but if you draw at 10.35 the sprite still lands between canvas pixels, so it looks soft while moving.

Keep movement in floats, but snap only the render position:


js
function drawSprite(img, x, y) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(img, Math.round(x), Math.round(y), 16, 16);
}

That’s the normal pixel-art tradeoff: crisp sprites mean visible 1px stepping/jitter during slow movement. A practical upgrade is to render the game to a small offscreen canvas, then scale that up with smoothing disabled so the whole scene stays consistent.

MechaPrime