Staaarter Tools

PNG Centerer

Uploads a PNG, decodes it onto an off-screen canvas, and places the unscaled image at the exact center of a new canvas sized to whatever width and height you choose, padding the surrounding area with transparency, then lets you download the result. A free online tool from Staaarter, right in your browser.

Runs locallyUpdated 2026-07-26
editortransformimagecanvaspng

Overview

Introduction

This tool centers a PNG within a new, larger canvas, entirely in your browser, without scaling or distorting the original content.

It's a common finishing step for asset preparation, where an image needs uniform breathing room around it.

What Is PNG Centerer?

A client-side centering tool that places an uploaded PNG's unscaled pixel data at the exact middle of a new transparent canvas sized to your chosen width and height.

It's a focused, single-purpose version of the canvas size changer, always using the center anchor.

How PNG Centerer Works

The tool computes the offset needed to place the source image's center at the new canvas's center, then copies every source pixel to its corresponding position on the new, larger buffer.

Any canvas area not covered by the original image stays fully transparent, since a freshly created pixel buffer starts at all zeros.

When To Use PNG Centerer

Use it to add equal padding around a logo or icon so it doesn't look cramped when placed into a fixed-size UI element.

It's also useful for standardizing a batch of differently-shaped assets onto one consistent, centered canvas size.

Often used alongside PNG Canvas Size Changer and PNG Resizer.

Features

Advantages

  • Runs entirely client-side; the uploaded image is never sent to a server.
  • Never distorts the original image, unlike scaling to a new aspect ratio.
  • Simple, single-purpose control (just width and height) with no anchor decision to make.

Limitations

  • If the target canvas is smaller than the source image, content is cropped symmetrically rather than scaled down; use the resizer if you need the whole image to fit at a smaller size.
  • Only offers exact centering; for other anchor positions, use the canvas size changer instead.

Examples

Center an icon for a fixed-size UI slot

Input

A 64x64 PNG icon, target canvas 100x100

Output

The same icon centered within a 100x100 transparent canvas, 18px of padding on every side

The offset is calculated as half the difference between the new and original dimensions on each axis.

Center-crop an oversized image onto a smaller canvas

Input

A 300x300 PNG, target canvas 200x200

Output

The center 200x200 region of the original image

When the target canvas is smaller, centering still applies but the excess on every side is cropped away instead of padded.

Best Practices & Notes

Best Practices

  • Use this whenever you specifically want center alignment; reach for the canvas size changer only if you need a different anchor.
  • Check the preview carefully when shrinking the canvas, since content will be cropped rather than scaled.

Developer Notes

The lib function is a one-line wrapper around changePngCanvasSize from png-canvas-size-changer.ts with the anchor parameter fixed to 'center', reusing that function's offset math and bounds-checked pixel copy rather than re-deriving centering logic.

PNG Centerer Use Cases

  • Adding uniform padding around a logo or icon
  • Center-cropping an oversized image onto a smaller canvas
  • Standardizing a batch of assets onto one consistent centered canvas

Common Mistakes

  • Expecting the image to scale to fill the new canvas — it stays at its original size, just repositioned.
  • Choosing a target canvas smaller than the image and being surprised by symmetric cropping instead of a shrink.

Tips

  • If you need a non-center anchor, use the canvas size changer tool instead, which supports the same operation with more anchor options.
  • Pair with the resizer first if you want to both resize the content and then center it on a new canvas.

References

Frequently Asked Questions