Image Flip & Rotate

How to Use the Flip and Rotate Tool

1. Upload an image by dragging it into the dropzone or clicking to browse. JPEG, PNG, WebP, and GIF all decode successfully via createImageBitmap.
2. Hit the orientation buttons. "Flip Horizontal" mirrors left-right, "Flip Vertical" mirrors top-bottom, and the three rotate buttons spin the image by 90, 180, or 270 degrees clockwise.
3. Combine transforms freely. Each button toggles a state indicator in the toolbar so you can track what has been applied. The preview re-renders immediately - you see the result before committing.
4. Use "Reset" to undo all transforms and return to the original orientation without re-uploading.
5. Click "Download" to export the current oriented version as a PNG through canvas.toBlob. The pixel data is preserved exactly; no resampling runs.

How the Math Works

Flipping and rotating by right angles are pure coordinate transformations - every source pixel maps to exactly one destination pixel, so the output has exactly the same information content as the input. We use the Canvas 2D context's matrix stack: ctx.translate to move the origin to where the rotated image needs to land, ctx.rotate with a multiple of pi/2 radians for the rotation, and ctx.scale(-1, 1) or ctx.scale(1, -1) for horizontal or vertical flips. All four transforms compose into a single 3x3 affine matrix which drawImage applies during the paint.

Because the matrix is always a multiple of 90 degrees plus integer-pixel translations, the final sampled positions coincide exactly with integer pixel centers. The resampling filter does nothing: each output pixel ends up reading a single source pixel. That means flipping or rotating, unlike arbitrary-angle rotation, is bit-perfect - you can rotate 90 degrees four times and end up with the exact same bytes you started with.

Real Reasons to Flip or Rotate

• Correcting the mirror-flip that selfie cameras apply so text in the background reads correctly in the final photo.
• Fixing a phone photo where the EXIF orientation tag was wrong and the shot looks sideways in older software.
• Rotating a scanned document that was fed into the scanner upside down without asking you to reprint it.
• Flipping a stock photo model so the subject faces into a layout rather than out of it - a classic design trick for hero images.
• Creating symmetrical design elements by duplicating an asset and flipping one copy horizontally.
• Preparing a "before and after" pair where the second image needs to mirror the first for side-by-side comparison.

Orientation Gotchas

• EXIF orientation tags get stripped. Phones often store the pixel data landscape-on-disk but set an EXIF "Orientation: Rotate 90 CW" tag that viewers honor at display time. Re-exporting through Canvas bakes the pixels into the final orientation and removes the tag, which is what you want for universal compatibility.
• Flipping text becomes unreadable. Obvious, but a surprise: a horizontally flipped photo of a street scene has mirrored signs and license plates. Do not flip if the content is meaningful text.
• Non-90-degree rotations are not offered. The buttons are locked to multiples of 90 degrees because arbitrary rotation requires resampling and would introduce softness. Use a full editor if you need to straighten a crooked horizon at 2.7 degrees.
• The image dimensions swap on 90 and 270 degree rotations. A 1920 x 1080 landscape becomes 1080 x 1920 portrait. Downstream tools expecting a specific aspect ratio need to account for this.
• Animated GIFs lose animation. The canvas only sees the current frame. Keep animation in the source and use a GIF-specific tool for transforming animated content.

EXIF Orientation in Depth

The EXIF 2.32 specification defines Tag 0x0112 (Orientation) with eight possible values, representing the eight combinations of 90-degree rotations and flips. Value 1 is "normal"; 3 is "rotate 180"; 6 is "rotate 90 CW"; 8 is "rotate 90 CCW"; and values 2, 4, 5, 7 are mirrored variants. A well-behaved viewer reads this tag and applies the transformation at display time, leaving the actual pixel data in its original sensor orientation. That is why a photo can look correct in your phone\'s Photos app but appear sideways when you open it in an older tool that does not honor the tag. Re-saving through Canvas replaces the ambiguous "original pixels plus tag" with unambiguous "pixels already in the right orientation", which fixes display in every downstream tool. Modern browsers and most modern editors honor EXIF orientation automatically; the holdouts are command-line batch jobs and older CMS uploaders.

When a Full Editor Does It Better

For right-angle flips and rotations the Canvas approach is genuinely the best tool - it is lossless, instant, and private. Where desktop editors like Photoshop, Affinity, or GIMP pull ahead is arbitrary-angle rotation (straightening a horizon), perspective correction, and non-destructive orientation edits that let you revisit the choice later. On the CLI, jhead -autorot is the classic way to bake EXIF orientation into pixels for a whole folder of JPEGs without recompressing - it rotates losslessly using JPEG block-level operations rather than a full decode-encode cycle. ImageMagick\'s magick input.jpg -auto-orient output.jpg does the same at higher fidelity. Photopea, the browser-based Photoshop clone, offers the same arbitrary-angle rotations with a proper crop tool for fixing the resulting empty corners. Use this tool for the common right-angle fix; step up to a real editor for arbitrary angles or perspective work.