You can do it using setInterval method by changing the degree in each interval, you can modify incrementer value and time setInterval to suit your speed and also break the interval using some flags or conditions
window.setInterval(draw, 1);
var color = ['#FF0000','#FF0000','#FF0000','#FF0000','#FF0000','#FF0000'];//list color
var label = ['googluck', '10%','Thank','10$','5$','10$',"20%"]; //list lable name
var slices = color.length;
var sliceDeg = 360/slices;
var deg = -90;
var ctx = canvas.getContext('2d');
var width = canvas.width; // size
var center = width/2; // center
var slices = color.length;
var sliceDeg = 360 / slices;
var deg = -90;
var ctx = canvas.getContext('2d');
var width = canvas.width;// size
var center = width / 2; // center
function deg2rad(deg) {
return deg * Math.PI / 180;
}
function drawSlice(deg, color) {
ctx.beginPath();
ctx.fillStyle = color;
ctx.lineWidth = 2;
ctx.strokeStyle = "#ffffff";
ctx.moveTo(center, center);
ctx.arc(center, center, width / 2, deg2rad(deg), deg2rad(deg + sliceDeg));
ctx.lineTo(center, center);
ctx.fill();
ctx.stroke();
}
function drawPoin(deg, color) {
ctx.beginPath();
ctx.fillStyle = color;
ctx.moveTo(center, center);
ctx.arc(center, center, 50, deg2rad(deg), deg2rad(deg + sliceDeg));
ctx.lineTo(center, center);
ctx.fill();
}
function drawText(deg, text) {
ctx.save();
ctx.translate(center, center);
ctx.rotate(deg2rad(deg));
ctx.textAlign = "right";
ctx.fillStyle = "#fff";
ctx.font = '18px Arial';
ctx.shadowColor = "#000000";
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = 20;
ctx.fillText(text, center - 25, 10);
ctx.restore();
}
function draw() {
deg++;
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < slices; i++) {
drawSlice(deg, color[i]);
drawPoin(deg, '#fff');
drawText(deg + sliceDeg / 2, label[i]);
deg += sliceDeg;
}
if(deg == 0) {
degreeMultiplier = 0;
deg=-90;
}
}
<canvas id="canvas" width="500" height="500"></canvas>