how to spin and stop wheel has custom position with jquery

Question

this i my code. I am using this CSS code I want to spin my wheel:

now i want to spin and stop wheel has custom position with jquery? 

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();
	}
	for (var i = 0; i < slices; i++) {
		drawSlice(deg, color[i]);
		drawPoin(deg, '#fff');
		drawText(deg + sliceDeg / 2, label[i]);
		deg += sliceDeg;
	}

<canvas id="canvas" width="500" height="500"></canvas>

Answer 1

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>