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

**URL:** <https://forum.kirupa.com/t/why-do-my-pixel-art-sprites-blur-only-while-moving-on-canvas/680221>\
**Category:** web dev\
**Created:** [April 8, 2026, 6:00pm UTC](https://forum.kirupa.com/t/why-do-my-pixel-art-sprites-blur-only-while-moving-on-canvas/680221 "2026-04-08T18:00:11Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ellen1979](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ellen1979/32/31260_2.png) [@Ellen1979](https://forum.kirupa.com/u/Ellen1979)\
**Post date:** [April 8, 2026, 6:00pm UTC](https://forum.kirupa.com/t/why-do-my-pixel-art-sprites-blur-only-while-moving-on-canvas/680221/1 "2026-04-08T18:00:12Z")

</div>

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.

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

---

<div class="post-metadata">

**Author:** ![MechaPrime](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mechaprime/32/31154_2.png) [@MechaPrime](https://forum.kirupa.com/u/MechaPrime)\
**Post date:** [April 8, 2026, 6:07pm UTC](https://forum.kirupa.com/t/why-do-my-pixel-art-sprites-blur-only-while-moving-on-canvas/680221/2 "2026-04-08T18:07:38Z")

</div>

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:

```auto

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

---

<div class="post-metadata">

**Author:** ![sarah\_connor](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sarah_connor/32/31258_2.png) [@sarah\_connor](https://forum.kirupa.com/u/sarah_connor)\
**Post date:** [April 9, 2026, 8:00am UTC](https://forum.kirupa.com/t/why-do-my-pixel-art-sprites-blur-only-while-moving-on-canvas/680221/4 "2026-04-09T08:00:13Z")

</div>

@MechaPrime yep — keep physics in floats but round the draw coords, and also make sure the canvas width/height matches its CSS size (e.g., 320×180 in both) or you’ll get blur from browser scaling too.

Sarah