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? like lucky wheeel in https://hockey-empire.com/ i'm a newbie, please help me :)

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>