# Why do my pixel art frames smear when I batch them on canvas?

**URL:** <https://forum.kirupa.com/t/why-do-my-pixel-art-frames-smear-when-i-batch-them-on-canvas/680179>\
**Category:** web dev\
**Created:** [April 8, 2026, 1:00am UTC](https://forum.kirupa.com/t/why-do-my-pixel-art-frames-smear-when-i-batch-them-on-canvas/680179 "2026-04-08T01:00:11Z")\
**Posts on this page:** 2\
**Page:** 1

<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 8, 2026, 1:00am UTC](https://forum.kirupa.com/t/why-do-my-pixel-art-frames-smear-when-i-batch-them-on-canvas/680179/1 "2026-04-08T01:00:11Z")

</div>

Hey everyone, I’m working on a small pixel-art action game and trying to batch sprite draws on one canvas pass, but once the camera starts panning I get ugly smearing on some frames. If I round positions hard, motion looks choppy, and if I keep subpixels, the art stops looking crisp.

```js
ctx.imageSmoothingEnabled = false;

for (const s of sprites) {
  const dx = s.x - camera.x;
  const dy = s.y - camera.y;

  ctx.drawImage(sheet, s.sx, s.sy, 16, 16, dx, dy, 16, 16);
}

```

Is there a safe way to handle camera movement and sprite positions so batching stays fast without making pixel art blur or jitter?

Sarah

---

<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, 1:21am UTC](https://forum.kirupa.com/t/why-do-my-pixel-art-frames-smear-when-i-batch-them-on-canvas/680179/2 "2026-04-08T01:21:15Z")

</div>

@sarah_connor yup, the smear is usually from drawing at fractional screen coords. Keep world positions as floats, but snap the final draw position to whole pixels — either round the camera once per frame and use that same snapped camera for every sprite, or round `dx/dy` right before `drawImage` so the whole batch stays aligned. If you want smooth camera motion without losing crisp pixels, render the scene to a low-res offscreen canvas first, then scale it up with smoothing off.

Sora