title: HTML5 Canvas & javascript prize wheel
body: <p>I am having trouble trying to implement a "prize wheel," using canvas.  I am using something similar to the canvas "roulette wheel" <a href="http://jsfiddle.net/wYhvB/4/" rel="nofollow">http://jsfiddle.net/wYhvB/4/</a>  that is floating around StackOverflow.  My dilema is when you click spin, in the background I make an API call that returns an id of which prize should actually be chosen, the interface is nothing more than eye candy. I am pushing all the prize descriptions into the first array, how can I add an id into each one of the arcs and stop on a particular one instead of stopping on a specifically random time? I.E. If the API returns "car," I want this wheel to spin a few times and stop on car.</p>
  
  <pre><code>    var colors = ["##eaeaea", "##cccccc", "##eaeaea", "##cccccc",
                    "##eaeaea", "##cccccc", "##eaeaea", "##cccccc"];
      // NEED to pre load this data prior
      var prize_descriptions = ["car","house","etc..."]; // These are injected on an init call from an api
      var current_user_status = {};
  
      var startAngle = 0;
      var arc = Math.PI / 4;
      var spinTimeout = null;
  
      var spinArcStart = 10;
      var spinTime = 0;
      var spinTimeTotal = 0;
  
      var current_user_status = null;
      var spin_results = null;
  
      var ctx;
  
      function drawSpinnerWheel() {
        var canvas = document.getElementById("canvas");
        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 12px Helvetica, Arial';
  
          for(var i = 0; i &lt; 8; i++) {
            var angle = startAngle + i * arc;
            ctx.fillStyle = colors[i];
  
            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_descriptions[i];
            if (text == undefined)
              text = "Not this time! "+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() {
        spinTime += 30;
        if(spinTime &gt;= spinTimeTotal) {
          stopRotateWheel();
          return;
        }
        var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
        startAngle += (spinAngle * Math.PI / 180);
        drawSpinnerWheel();
        spinTimeout = setTimeout('rotateWheel()', 30);
      }
  
      function stopRotateWheel() {
        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 30px Helvetica, Arial';
        var text = prize_descriptions[index];
        ctx.fillText(text, 250 - ctx.measureText(text).width / 2, 250 + 10);
        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);
      }
  
  
  drawSpinnerWheel();
  
  $("#spin").bind('click', function(e) {
    e.preventDefault();
    spin();
  });​
  </code></pre>