Color Wheel, aka The Teeroulette

Canvas implemenation of a simple color wheel for t-shirt Wednesday color selection at Prodevelop.

HTML

<h2>Teeroulette</h2>
<p>¿De qué color será nuestra camiseta el próximo miércoles en <a href="http://www.prodevelop.es">Prodevelop</a>?</p>
<canvas id="wheelcanvas" width="400" height="350"></canvas>
<p>Idea by <a href="http://twitter.com/nezka_">@Nezka_</a></p>

CSS

body{font-family:sans-serif;}

JavaScript

/*
Code from 
http://tpstatic.com/_sotc/sites/default/files/1010/source/roulettewheel.html

Spin button removed, just use the Run button from jsFiddle
*/

var colors = [
  "#909099", "#3AB745",
  "#3501CB", "#3AB745",
  "#F80120", "#3AB745",
  "#FEF200", "#3AB745"];

var names = [
  "Novia", "Lechuga",
  "Esri", "Morao",
  "Commie", "gvSIG",
  "Huevo frito", "Android"];

var numColors = colors.length;
var startAngle = 0;
var arc = Math.PI / (numColors / 2);
var spinTimeout = null;

var spinArcStart = 10;
var spinTime = 0;
var spinTimeTotal = 0;

var center = 180;

var ctx;

var draw = function () {
  drawRouletteWheel();
};

var drawRouletteWheel = function () {
  var canvas = document.getElementById("wheelcanvas");
  if (canvas.getContext) {
    var outsideRadius = 150;
    var textRadius = 120;
    var insideRadius = 56;

    ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, center*2, center*2);


    ctx.strokeStyle = "black";
    ctx.lineWidth = 2;

    ctx.font = 'bold 12px sans-serif';

    for (var i = 0; i < numColors; i++) {
    var angle = startAngle + i * arc;
    ctx.fillStyle = colors[i];

    ctx.beginPath();
    ctx.arc(center, center, outsideRadius, angle, angle + arc, false);
    ctx.arc(center, center, 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(center + Math.cos(angle + arc / 2) * textRadius, 
      center + Math.sin(angle + arc / 2) * textRadius);
    ctx.rotate(angle + arc / 2 + Math.PI / 2);
    var text = names[i];
    ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
    ctx.restore();
    }

    //Arrow
    ctx.fillStyle = "black";
    ctx.beginPath();
    ctx.moveTo(center - 4, center - (outsideRadius + 5));
    ctx.lineTo(center + 4, center - (outsideRadius + 5));
    ctx.lineTo(center + 4, center -...