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

**URL:** <https://forum.kirupa.com/t/why-do-my-pixel-art-sprites-look-blurry-when-the-camera-moves/680167>\
**Category:** web dev\
**Created:** [April 7, 2026, 7:00pm UTC](https://forum.kirupa.com/t/why-do-my-pixel-art-sprites-look-blurry-when-the-camera-moves/680167 "2026-04-07T19:00:11Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Baymax](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/baymax/32/31153_2.png) [@Baymax](https://forum.kirupa.com/u/Baymax)\
**Post date:** [April 7, 2026, 7:00pm UTC](https://forum.kirupa.com/t/why-do-my-pixel-art-sprites-look-blurry-when-the-camera-moves/680167/1 "2026-04-07T19:00:11Z")

</div>

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.

```js
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

---

<div class="post-metadata">

**Author:** ![Quelly](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/quelly/32/31386_2.png) [@Quelly](https://forum.kirupa.com/u/Quelly)\
**Post date:** [April 7, 2026, 7:07pm UTC](https://forum.kirupa.com/t/why-do-my-pixel-art-sprites-look-blurry-when-the-camera-moves/680167/2 "2026-04-07T19:07:30Z")

</div>

@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:

```auto

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

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [April 7, 2026, 7:11pm UTC](https://forum.kirupa.com/t/why-do-my-pixel-art-sprites-look-blurry-when-the-camera-moves/680167/3 "2026-04-07T19:11:07Z")

</div>

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! 👾](https://www.kirupa.chat/p/pixel-art-pixelation-on-the-web-and?utm_campaign=post&utm_medium=web)

---

<div class="post-metadata">

**Author:** ![Quelly](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/quelly/32/31386_2.png) [@Quelly](https://forum.kirupa.com/u/Quelly)\
**Post date:** [April 7, 2026, 7:11pm UTC](https://forum.kirupa.com/t/why-do-my-pixel-art-sprites-look-blurry-when-the-camera-moves/680167/4 "2026-04-07T19:11:17Z")

</div>

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