Canvas Arc not clearing

Question

So I'm trying to make a rotating arc on a transparent background for a site. Most of it works, except for some reason each iteration of my arc drawing function also draws each previous arc.

Here is the code, and be careful clicking the link because this can lock-up your browser if you stay on the page for too long (only confirmed to do that in Firefox).

http://jsfiddle.net/djaEq/3/

This is the JavaScript:

       function MovingArc(cx, cy, radius, size, angle){
    this.centerX = cx;
    this.centerY = cy;
    this.radius = radius; //thickness
    this.size = size; //width
    this.angle = angle;

    this.startAngle = 0;
    this.endAngle = 0;

    this.checkClockwise = function(){
        var num = Math.round(Math.random());
        return (num == 1);
    }

    this.clockwise = this.checkClockwise();
    this.update = function(){
        if(this.clockwise) this.angle += 2;
        else this.angle -= 2;

        this.startAngle = this.angle - (this.size/2);
        this.endAngle = this.angle + (this.size/2);
    }
}

var myArc;

function init() {
    myArc = new MovingArc(50,50, 50,50, 60);

    update();
    setInterval(update, 1000 / 60);
}

function drawCanvas(){
    var ctx = $('#canvasbanner')[0].getContext("2d"); //get context of canvas
    ctx.clearRect(0,0,400,400);

    ctx.fillStyle = "#000000";;
    ctx.arc(myArc.centerX,myArc.centerY,myArc.radius,myArc.startAngle,myArc.endAngle,false);
    ctx.stroke();
}

function update(){
    myArc.update();
    drawCanvas();
}

$(document).ready(function() {
    console.log("doc ready");
    init();
});

Answer 1

The arc command takes radians for starting and ending angles and it looks like you're sending degree angles.

Make sure to ctx.beginPath() or else you're redrawing every previously draw arc with each iteration.

function drawCanvas(){
    var ctx = $('#canvasbanner')[0].getContext("2d"); //get context of canvas
    ctx.clearRect(0,0,400,400);

    ctx.beginPath();
    ctx.fillStyle = "#000000";;
    ctx.arc(myArc.centerX,myArc.centerY,myArc.radius,myArc.startAngle,myArc.endAngle,false);
    ctx.stroke();
}