html5 circle,javascript

I am trying to spin a circle on a canvas, i think i got most of the code but i don't know whats wrong with the code, the circle is not spinning. Do i need to create another function in order to spin the circle?

any suggestions

var angle = 0;

function convertToRadians(degree) {

return degree*(Math.PI/180);

}

function incrementAngle() {

angle++;

if(angle > 360) {

angle = 0;

}

}

var myColor = ["#ECD078","#D95B43"];

var myData = [50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50];

function getTotal(){

var myTotal = 0;

for (var j = 0; j < myData.length; j++) {

myTotal += myData[j];

}

return myTotal;

}

function drawColoredCircle() {

var lastend = 0;

var myTotal = getTotal();//160

for (var i = 0; i < myData.length; i++) {

ctxBg.fillStyle = myColor[i%2];

ctxBg.translate(canvasBg.width/2, canvasBg.width/2);

ctxBg.rotate(convertToRadians(angle));

ctxBg.translate(-canvasBg.width/2, -canvasBg.width/2);

ctxBg.beginPath();

ctxBg.moveTo(canvasBg.width/2,canvasBg.width/2);

ctxBg.arc(canvasBg.width/2,canvasBg.height/2,500,lastend,lastend+(Math.PI*2*(myData[i]/myTotal)),false);

ctxBg.lineTo(canvasBg.width/2,canvasBg.height/2);

ctxBg.fill();

lastend += Math.PI*2*(myData[i]/myTotal);

}

}

function loop(){

drawColoredCircle();

requestAnimFrame(loop);

}