About

Most image editors default to rectangular selections. Extracting a circular region requires manual masking, alpha-channel management, and careful anti-aliasing at the boundary. This tool performs a true geometric clip using the Canvas arc(cx, cy, r, 0, 2π) path, producing a pixel-perfect circle with transparent alpha outside the boundary. Output resolution is user-defined, independent of source dimensions. The result is a lossless PNG with pre-multiplied alpha or a flat-background JPG. Note: JPEG does not support transparency. Choosing JPG export fills the exterior with white.

Incorrect cropping for profile avatars causes clipped faces, off-center framing, or visible compression artifacts at the mask edge. Platform upload validators (LinkedIn, GitHub, Slack) re-compress poorly cropped images further. Starting from a cleanly masked, correctly sized circular source avoids double-compression loss. This tool approximates sub-pixel anti-aliasing via the browser’s native canvas rasterizer, which applies implicit 4× MSAA on most GPU-accelerated backends. Limitation: very small output radii (< 32px) will show visible aliasing steps.

Formulas

The circular crop operation maps source image pixels to a circular output region. The canvas clip path defines the boundary via the parametric circle equation:

x(t) = cx + r ⋅ cos(t), y(t) = cy + r ⋅ sin(t), t ∈ [0, 2π]

where cx, cy = circle center in canvas coordinates, r = crop radius in pixels, and t = parameter angle. The pixel inclusion test for any point (px, py) is:

(px − cx)² + (py − cy)² ≤ r²

For the export canvas, the image is drawn with a scale factor s computed as:

s = outputSize2 ⋅ r

where outputSize = desired export dimension in pixels. The source region is translated so that the crop center maps to the output center. Alpha compositing uses globalCompositeOperation = "destination-in", which retains only pixels inside the circular mask.

Reference Data

Platform	Recommended Size	Format	Shape	Max File Size
GitHub	460 × 460px	PNG / JPG	Circle (auto-masked)	1MB
LinkedIn	400 × 400px	PNG / JPG	Circle	8MB
Twitter / X	400 × 400px	PNG / JPG	Circle	2MB
Instagram	320 × 320px	JPG	Circle	30MB
Facebook	170 × 170px	PNG / JPG	Circle	10MB
Slack	512 × 512px	PNG / JPG / GIF	Square (circle mask)	1MB
Discord	128 × 128px	PNG / JPG / GIF	Circle	8MB
YouTube	800 × 800px	PNG / JPG	Circle	2MB
TikTok	200 × 200px	JPG	Circle	5MB
WhatsApp	500 × 500px	JPG	Circle	5MB
Telegram	512 × 512px	PNG / JPG	Circle	5MB
Reddit	256 × 256px	PNG / JPG	Circle (snoovatar)	0.5MB
Twitch	256 × 256px	PNG / JPG	Circle	10MB
Pinterest	165 × 165px	JPG	Circle	10MB
Gravatar	600 × 600px	PNG / JPG	Square (circle display)	1MB

Frequently Asked Questions

The JPEG format does not support an alpha channel. All pixels outside the circle mask are filled with white (RGB 255, 255, 255). If you need true transparency, export as PNG, which stores a full 8-bit alpha channel per pixel.

If the source image crop region spans only 200 native pixels but you export at 800×800, the browser's bicubic interpolation will upsample, introducing softness. For best results, ensure the source image resolution exceeds the desired output size. A general rule: the crop circle should cover at least as many source pixels as the target output dimension.

Yes. The canvas compositing operation preserves source alpha values within the clip region. If the source image has transparent areas inside the crop circle, those pixels remain transparent in the output. The circle mask only removes pixels outside its boundary.

Modern browsers (Chrome 81+, Firefox 77+, Safari 13.1+) automatically apply EXIF orientation when drawing images to canvas via drawImage(). The tool reads the image through an HTMLImageElement, which triggers this automatic correction. On older browsers, the image may appear rotated. Workaround: pre-rotate the image in your phone's gallery app before loading.

The limit is determined by the browser's maximum canvas dimensions, typically 16384×16384 pixels on desktop (268 megapixels) and 4096×4096 on older mobile devices. Images exceeding this will fail to render on the canvas. For very large images (50+ megapixels from DSLR cameras), the browser may run out of GPU memory. The tool will display an error toast if the image cannot be loaded.

No. All processing occurs entirely within your browser using the Canvas API. The image data never leaves your device. The File API reads the image into local memory, the canvas performs the crop, and the Blob API generates the downloadable file. No network requests are made at any point.