Color Wheel

Canvas implemenation of a simple color wheel

HTML

<canvas id="wheelcanvas" width="500" height="500"></canvas>

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 = [
  "#FFFFFF", "#3AB745",
  "#3501CB", "#673A7E",
  "#CC0071", "#F80120", "#F35B20",
  "#FEF200", "#000000"];

var names = [
  "Blanco", "Lechuga",
  "In the navy", "Morao",
  "Fucsia", "Commie", "Naranjito",
  "Huevo frito", "Jebi"];

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 ctx;

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

var drawRouletteWheel = function () {
  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 12px sans-serif';

    for (var i = 0; i < numColors; 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 = names[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,...