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