Jeśli wykonujesz złożony, warstwowy rysunek, możesz użyć funkcji globalCompositeOperation do emulowania przycinania w drugim, roboczym obszarze roboczym. Następnie można użyć drawImage, aby skopiować płótno rysunkowe z powrotem na oryginalne płótno. Nie mogę zagwarantować wydajności tego podejścia, ale jest to jedyny sposób, jaki znam, aby uzyskać to, czego chcesz.
//set-up - probably only needs to be done once
var scratchCanvas = document.createElement('canvas');
scratchCanvas.width = 100;
scratchCanvas.height = 100;
var scratchCtx = scratchCanvas.getContext('2d');
//drawing code
scratchCtx.clearRect(0, 0, scratchCanvas.width, scratchCanvas.height);
scratchCtx.globalCompositeOperation = 'source-over'; //default
//Do whatever drawing you want. In your case, draw your image.
scratchCtx.drawImage(imageToCrop, ...);
//As long as we can represent our clipping region as a single path,
//we can perform our clipping by using a non-default composite operation.
//You can think of destination-in as "write alpha". It will not touch
//the color channel of the canvas, but will replace the alpha channel.
//(Actually, it will multiply the already drawn alpha with the alpha
//currently being drawn - meaning that things look good where two anti-
//aliased pixels overlap.)
//
//If you can't represent the clipping region as a single path, you can
//always draw your clip shape into yet another scratch canvas.
scratchCtx.fillStyle = '#fff'; //color doesn't matter, but we want full opacity
scratchCtx.globalCompositeOperation = 'destination-in';
scratchCtx.beginPath();
scratchCtx.arc(50, 50, 50, 0, 2 * Math.PI, true);
scratchCtx.closePath();
scratchCtx.fill();
//Now that we have a nice, cropped image, we can draw it in our
//actual canvas. We can even draw it over top existing pixels, and
//everything will look great!
ctx.drawImage(scratchCanvas, ...);
Powodem, dla którego robimy to na płótnie do rysowania, jest to, że miejsce docelowe jest bardzo destrukcyjną operacją. Jeśli już narysowałeś pewne rzeczy do głównego płótna (możesz umieścić ładny gradient w tle), a następnie chciałeś narysować przycięty obraz, kółko obcinania wycina również wszystko, co już narysowałeś. Oczywiście, jeśli twoja szczególna sytuacja jest prostsza (może WSZYSTKO, co chcesz narysować, jest obciętym obrazem), możesz zrezygnować z płótna do rysowania.
Można odtwarzać różne tryby przycinania pod numerem my demo page. Dolny rząd (z gradientami) nie jest dla ciebie zbyt przydatny, ale górny rząd (z okręgiem i kwadratem) jest dużo bardziej istotny.
edit
Ups, przypadkowo forked your JSFiddle zademonstrować technikę.
Wpadłem również na ten problem. To, co zrobiłem, to narysować koło w tym samym miejscu co obraz, za nim, o promieniu większym o 1 lub 2 piksele. Zachowaj kolor podobny i tam, "anty aliasowany" klip obrazu. – Automatico