title: HTML 5 fortune wheel (lunchwheel)
body: <p>I have been working on a simple fortune wheel implementation form <a href="http://bramp.net/blog/2011/07/27/html5-canvas-lunch-wheel/" rel="nofollow">here</a>,  using HTML 5 , but I'm having some issue in finding the winner segment , here is the code in JSFiddle : </p>
  
  <p><a href="http://jsfiddle.net/bramp/94jP6/" rel="nofollow">http://jsfiddle.net/bramp/94jP6/</a></p>
  
  <p>Important functions in JSFiddle : </p>
  
  <pre><code>// Called when segments have changed
  update: function() {
      // Ensure we start mid way on a item
      //var r = Math.floor(Math.random() * wheel.segments.length);
      var r = 0;
      wheel.angleCurrent = ((r + 0.5) / wheel.segments.length) * Math.PI * 2;
  
      var segments = wheel.segments;
      var len = segments.length;
      var colors = wheel.colors;
      var colorLen = colors.length;
  
      // Generate a color cache (so we have consistant coloring)
      var seg_color = new Array();
      for (var i = 0; i &lt; len; i++)
      seg_color.push(colors[segments[i].hashCode().mod(colorLen)]);
  
      wheel.seg_color = seg_color;
  
      wheel.draw();
  }
  </code></pre>
  
  <p>and </p>
  
  <pre><code>drawNeedle: function() {
      var ctx = wheel.canvasContext;
      var centerX = wheel.centerX;
      var centerY = wheel.centerY;
      var size = wheel.size;
  
      ctx.lineWidth = 1;
      ctx.strokeStyle = '#000000';
      ctx.fileStyle = '#ffffff';
  
      ctx.beginPath();
  
      ctx.moveTo(centerX + size - 40, centerY);
      ctx.lineTo(centerX + size + 20, centerY - 10);
      ctx.lineTo(centerX + size + 20, centerY + 10);
      ctx.closePath();
  
      ctx.stroke();
      ctx.fill();
  
      // Which segment is being pointed to?
      var i = wheel.segments.length - Math.floor((wheel.angleCurrent / (Math.PI * 2)) * wheel.segments.length) - 1;
  
      // Now draw the winning name
      ctx.textAlign = "left";
      ctx.textBaseline = "middle";
      ctx.fillStyle = '#000000';
      ctx.font = "2em Arial";
      ctx.fillText(wheel.segments[i], centerX + size + 25, centerY);
  },
  </code></pre>
  
  <p>in line 256 is where the current code is getting the winner :</p>
  
  <pre><code>var i = wheel.segments.length - Math.floor((wheel.angleCurrent / (Math.PI * 2)) * wheel.segments.length) - 1;
  </code></pre>
  
  <p>but thats on the right side of the wheel , Im trying to make it get the segment on top as the winner point . I have been struggling with it for a long time and i appreciate your help or guidance. Thanks </p>