JavaScript for Mobile - Learn HTML5 and JavaScript for Android - page 203

Figure 7-10. n * π radians
As you can see, 0 starts at the immediate right of the circle, and 2 will also result
in the same position. If you set the start position of the arc to 0 and the end
position as 2 * PI, the result will be nothing, as the circle will have no
circumference due to the 0 ° angle.
You will be redrawing the canvas at regular intervals, so you will need to clear
the canvas with every redraw to prevent displaying the previous context shapes
below the new ones. This can be achieved by calling context.clearRect(0, 0,
canvas width, canvas height); . This will essentially draw a clear rectangle over
the whole canvas. You don't have to worry about memory or shapes existing
after the rectangle is drawn, as only the current context is held within memory.
app.playButton = function(id, track){
...
this.draw = function(){
var percentage = 100 - ((track.getCurrentTime() / track.getLength()) *
100);
var endradians = (percentage * (2 / 100)) * Math.PI;
context.clearRect(0, 0, canvas.dimensions.width,
canvas.dimensions.height);
};
}