Any css or javascript techniques to display a 'slice' of a circle image?

Question

I'm trying to write a program where users upload circular images like this deliciously warm pizza:

The user then specifies the start and end of the arc in degrees so that a function will be called to display the same image, with a lower opacity on the leftover portion.

function cutPizza (startArcDegree, endArcDegree){
//This is where I need help    
}

cutPizza(150, 225);

Are there any css or javascript techniques to help me achieve this (Or any or ways for that matter)?

Answer 1

Yes, you should have a canvas that has a relative position to your pizza image. Then you can draw your circle on canvas, and configure canvas transparency

Read how to draw circles from here:

http://billmill.org/static/canvastutorial/ball.html

Answer 2

You could try generating a SVG and then look into Clipping, Masking and Compositing