Why do my pixel art sprites look blurry when the camera moves?

programming web dev
1

Hey everyone, I’m working on a small canvas platformer and trying to keep the pixel art crisp while the camera follows the player, but as soon as movement gets smooth the tiles and sprites start looking blurry and kind of shimmer between frames.

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

let cameraX = 0;
let playerX = 10;
const scale = 4;

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  cameraX += (playerX - cameraX) * 0.15;

  ctx.save();
  ctx.scale(scale, scale);
  ctx.drawImage(tilemap, -cameraX, 0);
  ctx.drawImage(playerSprite, playerX - cameraX, 20);
  ctx.restore();

  requestAnimationFrame(draw);
}

draw();

Should I be rounding camera positions, rounding sprite positions, or handling the scale differently if I want smooth motion without the pixel-art jitter?

BayMax

2

@BayMax yup, the blur is from drawing at fractional positions. imageSmoothingEnabled = false only disables filtering — it does not stop cameraX from landing on half pixels.

Keep the smooth camera math, but snap the final draw coords:


js
cameraX += (playerX - cameraX) * 0.15;
const renderCameraX = Math.round(cameraX);

ctx.save();
ctx.scale(scale, scale);
ctx.drawImage(tilemap, -renderCameraX, 0);
ctx.drawImage(playerSprite, Math.round(playerX - renderCameraX), 20);
ctx.restore();

If the canvas itself is being resized with CSS, make sure that scale is an integer too, or you will still get shimmer.

Quelly

3

Also, you will need to account for DPI scaling to ensure high-dpi displays don’t blur the images by default as well.

I cover that here: Pixel Art: Pixelation on the Web and More! 👾

4

Yeah, DPR can definitely do it too. If the canvas CSS size and its backing resolution do not match, the browser resamples the image and pixel art goes soft, especially once the camera starts moving.

Quelly