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)?

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)?

• javascript
• css

• 5 +1 for 'deliciously warm pizza' – Sean Carruthers Commented Feb 29, 2012 at 7:39
• Can you show us what you have got so far? – Starx Commented Feb 29, 2012 at 7:40
• 1 I usually use Raphael for this sort of thing. Here's a vaguely related demo. – thirtydot Commented Feb 29, 2012 at 10:51

2 Answers 2

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/static/canvastutorial/ball.html

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