How does circle crop work?

Circle crop uses the HTML5 Canvas arc() method to define a circular clipping path before drawing the image. Any pixels outside the circle become transparent. The output is saved as PNG to preserve the transparent background. The crop area is forced to a 1:1 square ratio so the circle is perfectly round.

Does this tool upload my images to a server?

No. All cropping happens in your browser using the HTML5 Canvas API and FileReader. Your images are read locally, processed in memory, and the result is downloaded directly to your device. No network requests are made.

What output format should I use for circle crop?

Always use PNG for circle crops. PNG supports transparent backgrounds (alpha channel), which is what creates the circular shape. JPEG does not support transparency — a circle-cropped JPEG would have a white square background instead of transparency. The tool automatically selects PNG when circle mode is active.

Image Tool

Image Crop Tool

Drag and resize to crop any image — circle, square, 16:9, portrait, or free selection. Runs entirely in your browser. No upload, no account.

How to Crop an Image

Interactive crop in six steps — no design software needed.

Upload Your Image

Drag an image onto the drop zone or click to browse. Supports JPEG, PNG, WebP, GIF, and BMP. The image is loaded directly into your browser — nothing is sent to a server.

Choose a Crop Shape

Select from Circle, Square (1:1), 16:9 (widescreen), 4:3 (standard), 3:2 (photo), 9:16 (portrait/story), 2:3, 1:2, or Free (drag any rectangle).

Drag to Position

Click and drag the crop box to move it anywhere over the image. The dark area outside the box shows what will be removed. The rule-of-thirds grid helps you compose the shot.

Resize with Handles

Drag the white corner handles to resize the crop area. Fixed-ratio modes (circle, square, 16:9…) lock the proportions as you resize. Free mode also has edge handles for one-axis resize.

Set Format & Quality

Choose JPEG, PNG, or WebP output. Adjust quality for JPEG/WebP. Circle crop automatically forces PNG to preserve the transparent background.

Crop & Download

Click "Crop Image" to render the result. A preview appears below the workspace. Click "Download Cropped Image" to save it. The file is named with the shape and dimensions appended.

The Logic Behind This Tool

How the crop box and canvas rendering work under the hood.

🖼️

Display vs Natural Coordinates

The crop box works in display pixels (the size the image appears on screen). When cropping, coordinates are scaled up by the ratio of natural width to display width, so the output is always at full image resolution.

⭕

Circle Crop via Canvas arc()

For circle crops, ctx.arc(cx, cy, radius, 0, 2π) defines a circular clipping path before drawing the image. Any pixels outside are discarded. The alpha channel in PNG stores the transparency.

📐

Aspect Ratio Enforcement

Fixed-ratio shapes compute height from width (or vice versa) using the formula h = w / ratio during every resize event, keeping both dimensions locked in proportion.

🎯

Rule of Thirds Grid

Four lines divide the crop box into thirds horizontally and vertically. Placing the subject on or near these lines produces more balanced, visually engaging compositions.

🖱️

Drag Interaction

Mousedown captures start position. Document-level mousemove tracks delta. Mouseup removes listeners. The same logic handles touch events via Touch API, making the tool mobile-friendly.

🔒

100% Private

FileReader loads the image into memory as a data URL. Canvas draws and encodes it. The result is offered as a Blob download. No network traffic is generated at any step.

Frequently Asked Questions

Common questions about cropping images online.

A circular crop creates a shape where the area outside the circle has no color — it's transparent. JPEG does not support transparency (alpha channel). If you saved a circular crop as JPEG, the transparent area would be filled with a white (or black) background, turning the circle into a square image with a white backdrop. PNG supports full alpha transparency, so the circular mask is preserved correctly. WebP also supports transparency and can be used as an alternative.

Yes. The crop box is displayed at the image's scaled-down size (to fit your screen), but the actual crop calculation uses the original image's natural pixel dimensions. A 4000×3000 pixel photo displayed at 800×600 on screen will produce a full-resolution crop output. The display scale factor is applied inversely when computing the canvas draw coordinates.

Yes. After downloading a crop, you can change the shape or crop box position and click "Crop Image" again to produce a different crop of the same image. Each crop is independent. The original image in memory is not modified — you're always cropping from the unmodified source.

The rule of thirds is a composition principle from photography and art. It divides the frame into a 3×3 grid and suggests placing the main subject at one of the four intersection points (where the lines cross) rather than dead center. This tends to produce more dynamic and balanced images. The grid overlay in the crop box is a visual guide — it doesn't affect the crop itself, just helps you position it.

Most platforms (Instagram, Facebook, Twitter/X, LinkedIn) display profile photos as circles, so any square (1:1) source image looks best — the platform applies the circular mask itself. Use the Square (1:1) mode, center your face in the crop box, and export as JPEG or PNG. For a pre-cropped circle (e.g. for a design or presentation), use Circle mode and export as PNG so the transparent background is preserved.

The crop preview is instant because the tool only moves CSS positions — no pixels are reprocessed until you click "Crop Image." The actual crop operation processes pixels once via Canvas. For very large images (20+ megapixels), the crop may take 1–2 seconds depending on your device's CPU. The result is still your full-resolution crop — no downscaling occurs unless you explicitly resize afterward.

Free mode removes all aspect ratio constraints, letting you drag the crop box to any rectangular shape independently. It also shows additional edge handles (top, bottom, left, right) in addition to the four corner handles, so you can resize along a single axis without affecting the perpendicular dimension. Use Free mode when you need an exact pixel region rather than a proportional crop.

Related Image Tools

View all →