# How should I smooth sprite movement without making pixel art shimmer?

**URL:** <https://forum.kirupa.com/t/how-should-i-smooth-sprite-movement-without-making-pixel-art-shimmer/680169>\
**Category:** web dev\
**Created:** [April 7, 2026, 8:00pm UTC](https://forum.kirupa.com/t/how-should-i-smooth-sprite-movement-without-making-pixel-art-shimmer/680169 "2026-04-07T20:00:10Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![BobaMilk](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/bobamilk/32/31157_2.png) [@BobaMilk](https://forum.kirupa.com/u/BobaMilk)\
**Post date:** [April 7, 2026, 8:00pm UTC](https://forum.kirupa.com/t/how-should-i-smooth-sprite-movement-without-making-pixel-art-shimmer/680169/1 "2026-04-07T20:00:10Z")

</div>

Hey everyone, I’m working on a small canvas pixel-art game and trying to smooth camera and sprite movement, but my sprites start shimmering when I interpolate positions. If I round everything, motion looks choppy. If I keep subpixel values, the art gets soft and edges crawl.

```js
const x = prevX + (nextX - prevX) * alpha;
const y = prevY + (nextY - prevY) * alpha;

ctx.imageSmoothingEnabled = false;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(sprite, x, y);

```

What is the usual fix here for smooth motion and stable pixel edges without introducing blurry rendering?

BobaMilk

---

<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, 8:07pm UTC](https://forum.kirupa.com/t/how-should-i-smooth-sprite-movement-without-making-pixel-art-shimmer/680169/2 "2026-04-07T20:07:15Z")

</div>

@BobaMilk yup, the usual fix is: keep physics/world/camera positions as floats, but snap the final screen-space draw position before `drawImage`.

So not `drawImage(sprite, x, y)` directly — do `const sx = Math.round((x - cameraX) * scale) / scale` and same for `y`, or just round to whole pixels if scale is 1. The really solid setup for pixel art is rendering the game to a low-res offscreen canvas with integer-snapped positions, then scaling that canvas up by an integer with `imageSmoothingEnabled = false`.

Quelly