Overview
Introduction
This tool shears a PNG image along its X and/or Y axis, entirely client-side, turning a rectangular image into a slanted parallelogram shape.
It uses the same inverse-sampling technique as the rotation tool so the expanded canvas is always sized exactly to fit the sheared result.
What Is PNG Skewer?
A client-side PNG skew (shear) tool that reads an uploaded image's pixel data, applies a linear shear matrix, and writes the result to a new, correctly-sized transparent canvas.
Shearing is a classic 2D affine transform distinct from rotation, scaling, and translation: it slides rows or columns sideways proportional to their distance from the center.
How PNG Skewer Works
For every pixel in the new, larger output canvas, the tool computes where that pixel would have come from in the source image by applying the inverse of the shear matrix, then copies that source pixel's color (or leaves it transparent if the source position falls outside the original image).
The output bounding box is calculated up front by shearing the four corners of the source rectangle and taking their combined extent.
When To Use PNG Skewer
Use it for stylized, dynamic-looking graphics, italic-style text banners, comic-book-style motion effects, or to correct a slight perspective skew introduced by a scanner or camera angle.
It's also useful for creating parallelogram-shaped design elements from a rectangular source image.
Often used alongside PNG Rotator and PNG Shifter.
Features
Advantages
- Runs entirely client-side; the uploaded image is never sent to a server.
- Supports independent X and Y shear angles for combined diagonal effects.
- Never clips corners, since the canvas expands to fit the sheared bounding box.
Limitations
- Nearest-neighbor sampling can show slightly jagged edges rather than smooth anti-aliased ones.
- Angles at or beyond 90 degrees are mathematically degenerate and rejected outright.
Examples
Best Practices & Notes
Best Practices
- Keep shear angles modest (under 30 degrees) for most design use cases; extreme angles quickly become illegible.
- Preview the result before downloading, since shearing changes the output image's dimensions.
Developer Notes
The shear math lives in a pure lib function operating on a plain Uint8ClampedArray pixel buffer (no DOM): it forward-maps the source corners to size the output canvas, then inverse-maps every output pixel back through the shear matrix to sample the source, mirroring the inverse-sampling approach png-rotator.ts already uses.
PNG Skewer Use Cases
- Creating a stylized, slanted promotional banner
- Correcting minor perspective skew from a scanned document
- Building a parallelogram-shaped UI or print asset from a rectangular photo
Common Mistakes
- Expecting the output image to keep the same dimensions as the input — sheared images are generally wider or taller than the source.
- Using an angle close to 90 degrees and being surprised by an error; shear becomes mathematically undefined at that limit.
Tips
- Combine a small X skew with a small Y skew for a subtle 3D-tilt illusion.
- Undo a skew by applying the same angle in the opposite (negative) direction.