Overview
Introduction
This tool adds a shape-hugging stroke around a PNG's non-transparent content, the same effect you'd get adding a sticker outline in a design tool, computed entirely client-side.
It works on any image with transparency, tracing the real silhouette instead of a generic rectangular frame.
What Is PNG Stroke Adder?
A stroke generator that scans a bounded neighborhood around every newly-expanded canvas pixel, checking whether any originally-opaque source pixel lies within the requested stroke thickness, and fills it with a solid color if so.
The result is a clean, uniform-width outline that traces the exact contour of your image's alpha shape.
How PNG Stroke Adder Works
The output canvas is expanded by the stroke thickness on every side. For each pixel in that larger canvas, the tool checks the corresponding source position: if it was opaque, the original color is kept; otherwise it searches nearby source pixels within the stroke radius and fills the stroke color if any of them were opaque.
This distance-based approach means the outline follows curves and irregular shapes correctly, not just straight rectangular edges.
When To Use PNG Stroke Adder
Use it to give a logo, icon, or cutout sticker a clean colored outline, a common effect for sticker sheets, badges, and social graphics.
It's also useful for improving the readability of a transparent icon against a busy background.
Often used alongside PNG Stroke Remover, PNG Outline Adder and PNG Outline Remover.
Features
Advantages
- Runs entirely client-side; your image never leaves the browser.
- Traces the actual alpha shape instead of drawing a rectangular frame.
- Works with any stroke color and opacity.
Limitations
- Very thick strokes on large images can be slow, since the neighborhood search scales with the square of the thickness.
- The stroke has hard, non-antialiased edges, matching the source image's own alpha channel precision.
Examples
Best Practices & Notes
Best Practices
- Choose a stroke color that contrasts with the backgrounds you plan to place the image on.
- Keep thickness proportional to the image's size; a very thick stroke on a small icon can overwhelm the shape.
Developer Notes
The pure stroke math lives in a lib function operating on a plain Uint8ClampedArray pixel buffer with no DOM dependency, using a bounded neighborhood search (not a full distance transform) since stroke thickness values in practice stay small; only the surrounding component touches an actual <canvas> element.
PNG Stroke Adder Use Cases
- Adding a sticker-style outline to a die-cut icon
- Improving a logo's contrast against varied backgrounds
- Creating badge or sticker sheet assets
Common Mistakes
- Expecting the output to stay the same size as the input — the canvas always grows by the stroke thickness.
- Using a stroke color with low opacity and expecting a fully opaque ring; the fill respects the color's own alpha value.
Tips
- Pair this with the outline remover tool if you need to undo a stroke you already baked into an image.
- For a sticker look, combine a thick white stroke with a subtle drop shadow.