After using ctx.clip () are redrawn every time the same image
Just need to start thinking about is not a time to clear the canvas and then draw ctx.clearRect () or not found then adjust the order of the code, line by line code comments to see what the problem is found to be clip () problem
Thinking long time
Behind Baidu thought for a moment look at the clip () syntax friends said
Tried it OK
ctx.save();
ctx.arc((rect.width / 2 - 17) + 20, 40, 20, 0, Math.PI * 2, false);
ctx.setStrokeStyle('rgba(0,0,0,0)')
ctx.stroke();
ctx.clip();
ctx.drawImage(avaterSrc, rect.width / 2 - 17, 20, 40, 40);
ctx.restore();
To summarize: we must first locate the problem and then view the api understand the syntax and context-sensitive view api principles relevant information (that is, you use this api, api you have to know the role and influence)