Wheel of fortune

HTML

<div id="wheel">
    <canvas id="canvas" width="300" height="300"></canvas>
 </div>
 <button id="spin">Stop!</button>
 <button id="play">play!</button>

CSS

#wheel{
  display:inline-block;
  position:relative;
  overflow:hidden;
}
#wheel:after{
  content:"";
  background:red;
  border:2px solid white;
  position:absolute;
  top:-7px;
  left:50%;
  width:10px;
  height:10px;
  margin-left:-7px;
  transform: rotate(45deg)
}

JavaScript

function rand(min, max) {
  return Math.random() * (max - min) + min;
}

var color = ['#fbc','#f88','#fbc','#f88','#fbc','#f88', "#fbc", "#f67"];
var label = ['10', '200', '50', '100', '5', '500', '0', "jPOT"];
var cheatText=label[4];
var slices = color.length;
var sliceDeg = 360/slices;
var deg = rand(0, 360);
var speed = 0;
var slowDownRand = 0;
var ctx = canvas.getContext('2d');
var width = canvas.width; // size
var center = width/2;      // center
var isStopped = false;
var lock = false;
$('#cheat').text('Stop on '+cheatText);
function deg2rad(deg) {
  return deg * Math.PI/180;
}

function drawSlice(deg, color) {
  ctx.beginPath();
  ctx.fillStyle = color;
  ctx.moveTo(center, center);
  ctx.arc(center, center, width/2, deg2rad(deg), deg2rad(deg+sliceDeg));
  ctx.lineTo(center, center);
  ctx.fill();
}
var wheel={
  cx:cw/2,
  cy:ch/2,
  radius:Math.min(cw,ch)/2-20,
  startAngle:0,
  endAngle:Math.PI*4+cheatingSpin(cheatText),
  totalSteps:360,
  currentStep:0,
}
function cheatingSpin(hit){
  var PI=Math.PI;
  var PI2=PI*2;
  var index=numbers.indexOf(cheatText);
  var pocketSweep=PI2/pocketCount;
  // cheatText not in numbers[]? -- then spin randomly
  if(index<0){return(PI2*2+Math.random()*PI2);}
  // if cheating, calc random endAngle inside desired number's pocket
  return((PI2-pocketSweep*(index+1))+Math.random()*pocketSweep-PI/2);
}
function drawText(deg, text) {
  ctx.save();
  ctx.translate(center, center);
  ctx.rotate(deg2rad(deg));
  ctx.textAlign = "right";
  ctx.fillStyle = "#fff";
  ctx.font = 'bold 30px sans-serif';
  ctx.fillText(text, 130, 10);
  ctx.restore();
}

function drawImg() {
  ctx.clearRect(0, 0, width, width);
  for(var i=0; i<slices; i++){
    drawSlice(deg, color[i]);
    drawText(deg+sliceDeg/2, label[i]);
    deg += sliceDeg;
  }
}



document.getElementById("spin").addEventListener("mousedown", function(){
  isStopped = true;
}, false);

drawImg();

document.getElementById("play").addEventListener("mousedown", function(){
 ...