Question

I’m wonder how you would go about and create a shape similar to this one below in HTML5 Canvas. It’s more or less a cropped circle I guess, though my need would render it a synch different.

http://img826.imageshack.us/img826/5198/98359410.jpg

context.fillStyle = "#000";
context.beginPath();
context.arc(200,200,100,0,Math.PI*2,true);
context.closePath();
context.fill();

Now to crop the booger, I’m perplexed. Could anyone lend me a hand? Thanks!

Answer 1

context.globalCompositeOperation = 'destination-in';

context.fillRect(200, 220, 200, 100); //Or something similar

destination-in means, per MDC: The existing canvas content is kept where both the new shape and existing canvas content overlap. Everything else is made transparent.

Or conversly

context.fillRect(200, 220, 200, 100);

context.globalCompositeOperation = 'source-in';

//Draw arc...

source-in means: The new shape is drawn only where both the new shape and the destination canvas overlap. Everything else is made transparent

Both these methods will end up disrupting other content already drawn to canvas, if this is an issue, use clip

context.save();
context.beginPath();

//Draw rectangular path
context.moveTo(200, 220);
context.lineTo(400, 220);
context.lineTo(400, 320);
context.lineTo(200, 320);
context.lineTo(200, 220);

//Use current path as clipping region
context.clip();

//Draw arc...

//Restore original clipping region, likely the full canvas area
context.restore()