Overview
Introduction
This tool changes a PNG's canvas size independently of its actual image content, entirely in your browser.
It's the same distinction most design tools draw between 'image size' (which scales pixels) and 'canvas size' (which only changes the surrounding frame).
What Is PNG Canvas Size Changer?
A client-side canvas-resizing tool that places an uploaded PNG's unscaled pixel data onto a new, differently-sized transparent canvas, anchored at a corner or the center you choose.
No scaling or interpolation happens to the image itself; only the amount of surrounding space changes.
How PNG Canvas Size Changer Works
Based on the chosen anchor (top-left, center, or bottom-right), the tool computes where the original image's top-left corner should land on the new canvas, then copies every source pixel to its corresponding position.
Any newly added canvas area stays fully transparent (since a fresh buffer starts at all zeros), while any part of the source image that falls outside the new, smaller canvas bounds is simply not copied, achieving a crop.
When To Use PNG Canvas Size Changer
Use it to add breathing room (padding) around a tightly-cropped image without stretching or distorting it.
It's also useful for standardizing a batch of differently-sized assets onto a single common canvas size, like preparing icons for a sprite sheet.
Often used alongside PNG Centerer, PNG Resizer and PNG Cropper.
Features
Advantages
- Runs entirely client-side; the uploaded image is never sent to a server.
- Never distorts the original image content, unlike a resize or aspect-ratio stretch.
- Flexible anchor options for controlling exactly where the content lands on the new canvas.
Limitations
- Shrinking the canvas crops content rather than scaling it down to fit; use the resizer instead if you want to preserve the whole image at a smaller size.
- Only supports three anchor points (top-left, center, bottom-right), not arbitrary custom offsets.
Examples
Best Practices & Notes
Best Practices
- Use the center anchor when adding padding evenly around an asset, and a corner anchor when you specifically need to preserve one edge or corner.
- If you actually want the whole image visible at a smaller size rather than cropped, use the resizer tool instead.
Developer Notes
The lib function computes a single (offsetX, offsetY) pair from the requested anchor and then does one pass copying source pixels into the new buffer with bounds checks on each side, so growing and shrinking the canvas share the exact same code path; png-centerer.ts is a one-line wrapper around this function with anchor fixed to 'center'.
PNG Canvas Size Changer Use Cases
- Adding uniform transparent padding around a tightly-cropped asset
- Cropping an image down to one corner or the center without scaling
- Standardizing a batch of assets onto a consistent canvas size
Common Mistakes
- Expecting the image content to scale to fill a larger canvas — it stays at its original pixel size; use the resizer if scaling is what you want.
- Shrinking the canvas and being surprised that content is cropped rather than shrunk to fit.
Tips
- Use the centerer tool directly if centering is the only anchor behavior you need — it's a simpler, single-purpose version of this same operation.
- Combine with the aspect ratio changer if you need both a specific ratio and padding.