# Why do my pixel art jumps look uneven when I snap sprite positions to integers?

**URL:** <https://forum.kirupa.com/t/why-do-my-pixel-art-jumps-look-uneven-when-i-snap-sprite-positions-to-integers/680225>\
**Category:** web dev\
**Created:** [April 8, 2026, 8:00pm UTC](https://forum.kirupa.com/t/why-do-my-pixel-art-jumps-look-uneven-when-i-snap-sprite-positions-to-integers/680225 "2026-04-08T20:00:10Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![sora](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sora/32/31259_2.png) [@sora](https://forum.kirupa.com/u/sora)\
**Post date:** [April 8, 2026, 8:00pm UTC](https://forum.kirupa.com/t/why-do-my-pixel-art-jumps-look-uneven-when-i-snap-sprite-positions-to-integers/680225/1 "2026-04-08T20:00:10Z")

</div>

Hey everyone, I’m working on a small canvas platformer and trying to keep the pixel art crisp, but my jump motion looks choppy if I round draw positions and blurry if I don’t, so right now it feels like I’m picking between clean pixels and smooth movement.

```js
const scale = 4;

function render(ctx, player, camera) {
  const screenX = Math.round((player.x - camera.x) * scale);
  const screenY = Math.round((player.y - camera.y) * scale);

  ctx.imageSmoothingEnabled = false;
  ctx.drawImage(spriteSheet, 0, 0, 16, 16, screenX, screenY, 16 * scale, 16 * scale);
}

```

Should I be snapping the camera, the sprite, or only certain motion states if I want pixel art to stay sharp without making vertical animation feel uneven?

Sora

---

<div class="post-metadata">

**Author:** ![Yoshiii](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/yoshiii/32/31156_2.png) [@Yoshiii](https://forum.kirupa.com/u/Yoshiii)\
**Post date:** [April 8, 2026, 8:28pm UTC](https://forum.kirupa.com/t/why-do-my-pixel-art-jumps-look-uneven-when-i-snap-sprite-positions-to-integers/680225/2 "2026-04-08T20:28:34Z")

</div>

@sora yup, the jitter is coming from rounding `(player - camera)` in one shot. Keep world/physics positions as floats, then snap the camera and sprite separately when you draw.

```auto

js
const scale = 4;

function render(ctx, player, camera) {
  const camX = Math.round(camera.x * scale);
  const camY = Math.round(camera.y * scale);

  const screenX = Math.round(player.x * scale) - camX;
  const screenY = Math.round(player.y * scale) - camY;

  ctx.imageSmoothingEnabled = false;
  ctx.drawImage(spriteSheet, 0, 0, 16, 16, screenX, screenY, 16 * scale, 16 * scale);
}

```

That keeps everything on the same pixel grid, so the art stays crisp without the jump arc getting that weird uneven step from mixed rounding. I would not special-case jump states here.

Yoshiii