Circle crop

The square you drag is scaled to the size you asked for, and then the shape is cut out of it: the canvas keeps what falls inside the circle and clears the rest, so the corners are genuinely empty rather than painted the colour of the page. That is why the file is a PNG by default — PNG carries transparency and JPEG does not. Choosing JPEG with transparent corners would give you black corners, so the page fills them with a colour instead and says so.

The shape is drawn at four times the size and scaled down, which is what keeps the edge of the circle smooth rather than jagged; at the sizes avatars are used, that is the difference between a clean rim and a staircase. The rounded square uses a radius given as a percentage of the side, so it stays proportional at any size — 50% is a circle, which is why the slider stops there.

Most places that take a round avatar want a square file and do the rounding themselves, so a transparent circle is only needed when you are placing the picture yourself — a website, a slide, a document. If you are uploading to a profile, a plain square usually travels better, and the Square button is there for exactly that.

The crop is re-encoded, so no EXIF, GPS or colour profile survives. The file is read in this tab with FileReader, the page makes no network requests, and nothing you drop is stored; the Dark button keeps its own setting in this browser's local storage.