Overview
Introduction
This tool shifts (translates) a PNG image's content by a pixel offset, entirely client-side, while keeping the output canvas the exact same size as the input.
An optional wrap-around mode makes it especially handy for checking and fixing seamless tile textures.
What Is PNG Shifter?
A client-side PNG shifter that reads an uploaded image's pixel data and copies each pixel to a new position offset by a fixed X/Y amount.
It supports two edge behaviors: clip (content that moves off an edge is discarded and the exposed area becomes transparent) and wrap (content that moves off one edge reappears on the opposite edge).
How PNG Shifter Works
For every pixel in the output canvas, the tool looks up the corresponding source pixel by subtracting the requested offset from its coordinates.
In wrap mode, out-of-range coordinates are wrapped back into range using modulo arithmetic; in clip mode, out-of-range coordinates are simply left transparent.
When To Use PNG Shifter
Use it to reposition a design element within a fixed canvas, create a subtle parallax or ghosting effect, or check a tileable texture for visible seams by shifting it by half its dimensions.
It's also useful for nudging a sprite or icon by a precise pixel amount.
Often used alongside PNG Skewer and PNG Mirrorer.
Features
Advantages
- Runs entirely client-side; the uploaded image is never sent to a server.
- Keeps the canvas size fixed, making it predictable to use in a larger layout.
- Wrap mode surfaces texture-tiling seams instantly.
Limitations
- Shift amounts must be whole pixel numbers; sub-pixel shifting isn't supported.
- Clip mode permanently discards pixels pushed off the canvas edge — download a copy first if you might need the original position back.
Examples
Best Practices & Notes
Best Practices
- Use wrap mode specifically for tileable textures; use clip mode for standalone graphics.
- Shift by exactly half the width/height when checking seamless tiles for the clearest seam view.
Developer Notes
The shift logic is a pure lib function operating on a plain Uint8ClampedArray pixel buffer (no DOM): it iterates the output canvas and, for each pixel, either wraps the source coordinate with modulo arithmetic or skips (leaving transparency) when the source falls outside the bounds.
PNG Shifter Use Cases
- Verifying a seamless texture tiles cleanly
- Nudging a layer's position by an exact pixel amount
- Creating a simple parallax offset between layered PNGs
Common Mistakes
- Forgetting that clip-mode shifts permanently lose the pixels pushed off-canvas — there's no undo once downloaded.
- Using a fractional offset and being surprised by the whole-number validation error.
Tips
- Combine a shift with the mirrorer or flipper tools for creative layered effects.
- For texture seam-checking, shift by exactly half the image's width and height with wrap enabled.