title: i need to slowdown the roulette spin in Javascript
body: <p>i have a homework i have to make roulette spin wheel code in javascript without plugin and i need some condition before this code 
  clearTimeout(spinTimeout);<br>
  but i dont know how to code for slowdown speed of roulette spin.
  and last one question, i need to random color in roulette with array of color </p>
  
  <p>here's my code :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;
  &lt;p&gt;&lt;/p&gt;
  &lt;p&gt;
   
    &lt;input type="button" value="spin" onmousedown="spin();" onmouseup="stopRotateWheel();" style="float: left;" /&gt;
  
    &lt;canvas id="wheelcanvas" width="500" height="500"&gt;&lt;/canvas&gt;
    &lt;script type="application/javascript"&gt;
   
    var prize = ["prize1", "prize2", "prize3", "prize4",
                       "prize5", "prize6", "prize7", "prize8",
                       "prize9", "prize10", "Article11", "Article12"];
    
    var startAngle = 0;
    var arc = Math.PI / 6;
    var spinTimeout =null;
    
    var spinArcStart = 10;
    var spinTime = 0;
    
    var ctx;
    var x = 100;
    var i = 30;
  
    spinpower=false;
    function Random_Color()
   {
    var colors = ["#C137BD", "#D74C76", "#BD3B47", "#DC4345", "#F69939",
    "#FCC334", "#D3DC5D", "#5DDF67", "#3ABF32", "#3DA053",
    "#3DA0A0", "#5A7CC3", "#5792EE", "#6E4ECE", "#B53CB1"
   ];
   
    var random_color = colors[Math.floor(Math.random() * colors.length)];
    return random_color;
   }
    function draw() {
      drawRouletteWheel();
    }
    
    function drawRouletteWheel() {
      var canvas = document.getElementById("wheelcanvas");
      if (canvas.getContext) {
        var outsideRadius = 200;
        var textRadius = 160;
        var insideRadius = 125;
        
        ctx = canvas.getContext("2d");
        ctx.clearRect(0,0,500,500);
        
        
        ctx.strokeStyle = "black";
        ctx.lineWidth = 2;
        
        ctx.font = 'bold 15px sans-serif';
        
        for(var i = 0; i &lt; 12; i++) {
          var angle = startAngle + i * arc;
          ctx.fillStyle = Random_Color();
          
          ctx.beginPath();
          ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);
          ctx.arc(250, 250, insideRadius, angle + arc, angle, true);
          ctx.stroke();
          ctx.fill();
          
          ctx.save();
          ctx.shadowOffsetX = -1;
          ctx.shadowOffsetY = -1;
          ctx.shadowBlur    = 0;
          ctx.shadowColor   = "rgb(220,220,220)";
          ctx.fillStyle = "black";
          ctx.translate(250 + Math.cos(angle + arc / 2) * textRadius, 250 + Math.sin(angle + arc / 2) * textRadius);
          ctx.rotate(angle + arc / 2 + Math.PI / 2);
          var text = prize[i];
          ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
          ctx.restore();
        } 
        
        //Arrow
        ctx.fillStyle = "black";
        ctx.beginPath();
        ctx.moveTo(250 - 4, 250 - (outsideRadius + 5));
        ctx.lineTo(250 + 4, 250 - (outsideRadius + 5));
        ctx.lineTo(250 + 4, 250 - (outsideRadius - 5));
        ctx.lineTo(250 + 9, 250 - (outsideRadius - 5));
        ctx.lineTo(250 + 0, 250 - (outsideRadius - 13));
        ctx.lineTo(250 - 9, 250 - (outsideRadius - 5));
        ctx.lineTo(250 - 4, 250 - (outsideRadius - 5));
        ctx.lineTo(250 - 4, 250 - (outsideRadius + 5));
        ctx.fill();
      }
    }
    
    function spin() {
      spinAngleStart = Math.random() * 10 + 10;
      spinTime = 0;
      spinTimeTotal = Math.random() * 3 + 4 * 1000;
      rotateWheel();
    }
   
    function rotateWheel() {
   var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
        startAngle += (spinAngle * Math.PI / 180);
      drawRouletteWheel()
      
   x--;
   spinTimeout = setTimeout('rotateWheel()',x);
      if (x&lt;=-10){
       document.getElementById('welcomeDiv').style.display = "block";
     }
     
    }
   
  
    function stopRotateWheel() {
   x=100;
   document.getElementById('welcomeDiv').style.display = "none";
   clearTimeout(spinTimeout); 
      var degrees = startAngle * 180 / Math.PI + 90;
      var arcd = arc * 180 / Math.PI;
      var index = Math.floor((360 - degrees % 360) / arcd);
      ctx.save();
      ctx.font = 'bold 12px sans-serif';
      var text = prize[index]
      ctx.fillText(text, 250 - ctx.measureText(text).width / 2, 250 + 10);
   window.location = "navto://"+prize[index]+"_stack";
   
      ctx.restore();
    }
    
    function easeOut(t, b, c, d) {
      var ts = (t/=d)*t;
      var tc = ts*t;
      return b+c*(tc + -3*ts + 3*t);
    }
    
    draw();
  &lt;/script&gt;
  &lt;/p&gt;
  &lt;p&gt;&amp;nbsp;&lt;/p&gt;
    &lt;div id="welcomeDiv"  style="font-size:20;display:none;"  &gt; MAX SPIN&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>