Capturing an HTML5 canvas using an arc is not suitable

Question

So, I tried to crop the image using ctx.clip and ctx.arc as follows:

ctx.beginPath();
ctx.arc(250, 250, 250, -Math.PI / 4, Math.PI / 4);
ctx.clip();
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

As you can see, I set the starting angle to -45 degrees and the ending angle to 45 degrees, but what I get is a segment of a circle / crescent, not a human figure, as you will see, fill the arc using ctx. fill.

Fiddle

Why is this and how to fix it?

Thanks in advance.

Answer 1

So, I found the problem, just add ctx.moveTo (x, y), where x and y are the center of the arc, for example:

ctx.beginPath();
ctx.moveTo(250, 250);
ctx.arc(250, 250, 250, -Math.PI / 4, Math.PI / 4);
ctx.clip();
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

Fiddle

Answer 2

HTML5 JavaScript, , . ctx.lineTo(250,250); : http://jsfiddle.net/7em21gvk/