Circle Crop Online — Circular Avatar Mask via Canvas ctx.arc() + ctx.clip()

Circle Crop — Auto-Centred Largest-Inscribed Circle via WHATWG Canvas ctx.arc() + ctx.clip() Path Mask

Crop any image to a perfect circle with transparent corners — the cleanest way to prepare avatars, profile pictures, and logo badges for platforms that render images inside round frames (Twitter/X, Discord, Slack, Mastodon, LinkedIn, GitHub). The tool builds the circular path via the WHATWG Canvas 2D Context's `ctx.arc(cx, cy, r, 0, 2π)` method (per html.spec.whatwg.org/#dom-context-2d-arc) — a 5-argument arc form drawing a complete 360° (0 to 2π radians) circle centred at (cx, cy) with radius r, then applies `ctx.clip()` to replace the current clip region with the intersection of that circular path and the canvas extent (per html.spec.whatwg.org/#dom-context-2d-clip). The subsequent `ctx.drawImage()` writes pixels only inside the clip region; pixels outside become transparent (alpha=0) in the output. The largest circle that fits inside the source is auto-centred: radius = min(width, height) / 2, centred at (size/2, size/2) within a square canvas of side min(width, height). Output is always PNG (W3C PNG 2nd Edition / ISO/IEC 15948:2004) — JPG would render the transparent corners as a white or black background per the JPEG baseline's lack of alpha channel. Files never leave the device.

How to circle-crop an image

Drop your image onto the tool or click to browse. Any common raster format that the browser decodes natively works (JPG, PNG, WebP, AVIF, BMP, GIF).
The tool computes the largest circle that fits inside the source: diameter = min(width, height), centred on the source. The crop is auto-applied — no manual adjustment.
Preview the result against the checkered transparency background (a CSS pattern indicating alpha=0 areas) to confirm the corners are transparent. The circle edge is anti-aliased by the Canvas rasteriser.
If your subject sits off-centre and the auto-crop misses it, run the source through the crop-image tool first to position the subject in the centre, then circle-crop.
Click Download to save the PNG. The original stays on disk untouched — files never leave the device.

Common use cases

Producing profile-picture PNGs with transparent corners so the visible crop matches exactly what a platform's circular frame displays (Twitter/X, Discord, Slack, Mastodon, LinkedIn, GitHub all use circular profile masks).
Creating circular brand badges and logo marks for team pages, about sections, and footer credits where the visual identity prefers round shapes.
Making podcast and YouTube channel avatars where the platform itself clips to a circle — pre-clipping the PNG gives you control over which subject pixels survive the platform's automatic clip.
Building round author portraits for blog headers and email signatures where the surrounding template renders avatars inside circles.
Producing circular preview images for design mockups where the target context (mobile app avatar list, dashboard tile, contact card) uses round image frames.

Frequently asked questions

Will my photo be off-centre in the circle?

The tool centres the crop on the geometric centre of the source image: the largest circle that fits inside the source is auto-centred at (width/2, height/2). If your subject sits off to one side or near the top/bottom, run the source through the crop-image tool first to recompose the subject at the geometric centre, then circle-crop. The circle-crop tool does NOT expose manual crop-centre offsets in the current implementation — auto-centre is the only mode.

Why is the output PNG and not JPG?

JPG (ITU-T T.81 baseline / JFIF v1.02) has no alpha channel — the transparent corners required by a circular mask cannot be represented in JPG. The decoded JPG would render the would-be-transparent corners as either pure white (default JFIF background) or whatever fill colour the canvas was initialised with. PNG (W3C 2nd Edition 10 November 2003) preserves 8-bit alpha per pixel byte-exactly through `canvas.toBlob('image/png')`. If you need JPG output, fill the canvas with a background colour before drawing — but the result will no longer be a true circular crop (you'll get a coloured square with a coloured-disc-on-coloured-square appearance).

Does the tool work with tall portrait photos?

Yes. The circle's diameter equals min(width, height) — so for portrait photos the shorter horizontal axis becomes the diameter. Subjects near the top or bottom of the frame may fall outside the circular crop region; if that happens, recompose the source via the crop-image tool first to position the subject at the geometric centre, then circle-crop.

How is the circle edge rendered?

The WHATWG Canvas 2D Context's arc() rasteriser handles the edge per its implementation-defined anti-aliasing (the spec at html.spec.whatwg.org leaves rasteriser quality implementation-defined). Modern browsers (Chrome, Firefox, Safari, Edge) anti-alias to sub-pixel accuracy — the edge transitions through ~1-2 px of intermediate alpha values rather than a hard step. For pixel-perfect hard-edge circles, you would need a custom rasteriser (none exposed in WHATWG Canvas).

Is my image uploaded?

No. The decode + ctx.arc + ctx.clip + ctx.drawImage + toBlob('image/png') chain all runs client-side via WHATWG Canvas. DevTools Network tab shows zero upload requests during conversion.

Canvas ctx.arc() + ctx.clip() path-based circular mask + PNG alpha output rationale

The circle-crop pipeline is geometrically simple but spec-precise: (1) load the source into HTMLImageElement at native dimensions; (2) compute `size = min(width, height)` — the largest dimension that fits a square inside the rectangular source, and the diameter of the largest inscribed circle; (3) compute centre offsets `ox = (width - size)/2`, `oy = (height - size)/2` to centre the square crop on the source; (4) create a canvas of dimension `size × size`; (5) call `ctx.beginPath() → ctx.arc(size/2, size/2, size/2, 0, Math.PI * 2) → ctx.closePath() → ctx.clip()` per WHATWG html.spec.whatwg.org — `arc()` adds a circular sub-path with centre (size/2, size/2), radius size/2, swept from angle 0 to 2π radians (a complete circle); `clip()` replaces the current clip region with the intersection of the just-defined arc path and the canvas extent; (6) `ctx.drawImage(source, ox, oy, size, size, 0, 0, size, size)` with the 9-argument source-rectangle extraction form — pixels inside the circular clip region are written; pixels outside remain transparent (alpha=0 since the canvas was freshly allocated with default RGBA all-zero state); (7) `canvas.toBlob('image/png')` per WHATWG — PNG preserves the alpha channel byte-exactly (8-bit alpha per RGBA pixel per W3C PNG 2nd Edition 10 November 2003). JPG is unavailable because the JPEG baseline (ITU-T T.81 1992) has no alpha channel — transparent areas would render as JFIF v1.02 default white (0xFFFFFF) or whatever background colour the canvas was filled with. The output PNG is browser-platform-portable: any platform that decodes PNG correctly handles the alpha mask (including Apple, Android, Windows, Linux desktop browsers since their early versions).

WHATWG Canvas ctx.arc(cx, cy, r, 0, 2π) path + ctx.clip() circular mask per html.spec.whatwg.org/#dom-context-2d-arc + html.spec.whatwg.org/#dom-context-2d-clip
Auto-centred largest-inscribed circle: diameter = min(source width, source height); centre = (size/2, size/2) within a size × size square canvas
PNG output (W3C 2nd Edition 10 November 2003 / ISO/IEC 15948:2004) with 8-bit per-pixel alpha — transparent corners preserved byte-exactly
Anti-aliased circle edge from the Canvas 2D Context rasteriser default (the spec leaves rasteriser quality implementation-defined; modern browsers anti-alias to sub-pixel accuracy)
Works on any aspect ratio, portrait or landscape — the shorter side becomes the diameter
Browser-side via WHATWG Canvas arc + clip + drawImage + toBlob('image/png') — no upload
Operates in sRGB (IEC 61966-2-1:1999); source images without an embedded ICC profile are interpreted as sRGB

Free. No signup. No file uploads. Ads via AdSense (consent required).

Sources (9)

WHATWG (live). HTML Living Standard — Canvas 2D Context: arc(x, y, radius, startAngle, endAngle). html.spec.whatwg.org/#dom-context-2d-arc — the circular-mask path-building primitive: arc() adds a circular sub-path centred at (x, y) with the given radius, swept from startAngle to endAngle in radians; circle-crop calls arc(size/2, size/2, size/2, 0, Math.PI * 2) to define a full 360° circle inscribed in a size × size square canvas.
WHATWG (live). HTML Living Standard — Canvas 2D Context: clip(). html.spec.whatwg.org/#dom-context-2d-clip — replaces the current clip region with the intersection of the current path and the canvas extent; subsequent drawImage calls only write pixels inside the clipped region, leaving the rest of the canvas at the default RGBA all-zero (fully transparent) state.
WHATWG (live). HTML Living Standard — Canvas 2D Context: drawImage() 9-argument source-rectangle extraction form. html.spec.whatwg.org/#dom-context-2d-drawimage — the source-rectangle extraction form used to centre the largest square crop on the rectangular source: drawImage(source, ox, oy, size, size, 0, 0, size, size) where size = min(sourceWidth, sourceHeight) and (ox, oy) = ((sourceWidth - size)/2, (sourceHeight - size)/2).
W3C (PNG Working Group) (2003). Portable Network Graphics (PNG) Specification (Second Edition). W3C Recommendation 10 November 2003 / ISO/IEC 15948:2004 — the only output format that preserves the alpha channel byte-exactly (8-bit alpha per RGBA pixel); JPG is unavailable for circle-crop because the JPEG baseline (ITU-T T.81 1992) has no alpha channel and would render the transparent corners as JFIF default white.
WHATWG (live). HTML Living Standard — HTMLCanvasElement.toBlob('image/png'). html.spec.whatwg.org/#dom-canvas-toblob — re-encodes the canvas pixel buffer to a PNG Blob via the browser's built-in encoder; alpha channel preserved through the encoder per W3C PNG 2nd Edition.
WHATWG (live). HTML Living Standard — HTMLImageElement (browser-native raster decoding). html.spec.whatwg.org/#htmlimageelement — universal browser entry point for raster format decode into Canvas.
ITU-T (CCITT) Study Group VIII & ISO/IEC JTC 1/SC 29/WG 10 (JPEG) (1992). Information technology — Digital compression and coding of continuous-tone still images: Requirements and guidelines. ITU-T Recommendation T.81 (18 September 1992) / ISO/IEC 10918-1:1994 — JPEG baseline DCT bitstream; cited in the circle-crop docs as the reason JPG output is unavailable (the baseline JPEG has no alpha channel).
Hamilton, E. (C-Cube Microsystems) (1992). JPEG File Interchange Format (JFIF) Version 1.02. 1 September 1992 — JPEG container format; the baseline-JPEG JFIF v1.02 default-white background is what would render in place of the transparent corners if JPG were used as the output format.
International Electrotechnical Commission (IEC) (1999). Multimedia systems and equipment — Colour measurement and management — Part 2-1: Default RGB colour space — sRGB. IEC 61966-2-1:1999 — default 8-bit RGB colour space the Canvas 2D path operates in.

These are the W3C, ISO/IEC, ITU-T, and IETF specifications the tool implements or builds on. Locate them on w3.org, iso.org, itu.int, or datatracker.ietf.org.