Wheel of Dev

Rotation of names from array

HTML

Wheel of Dev <input type="button" id="btn-spin" value="spin"/><div id="info">.</div><br />
<div id="container" />

CSS

#container { 
    background-color:#eee;
    width:300px;
    height:300px;
    display:block;
}
canvas {
position:absolute;
}
.canvasForeground, .canvasWheel, .canvasSelector { display:none; }
.canvasMain {
        width:300px;
    height:300px;
}

JavaScript

// peg flicker, based on angle and the center point of each slice being known
// input omar numbers
// add sound
// make resizable

var names = ['Rob',
             'Ian',
             'Jon',
             'Dave',
             'Declan',
             'Paul',
             'sss'];

names.push('Spin');
names.push('Other');

// define size as percentage of html or from html and init canvas
var canvases = [{"name":'canvasMain'}, {"name":'canvasWheel'}, {"name":'canvasForeground'},{"name":'canvasSelector'}]
var spinAngle = -3; // offset so the peg is not resting on the pointer
var spinAngleStart = -1;
var spinRate = 10;
var intervalHandle=null;
var spinAlt =0.2;
var spinReverseAngle = -1;
var fps = 14;

$('#btn-spin').on('click', function() {
    createWheel(names);
    var selector = getCanvas('canvasSelector');
    clearCanvasBlank(selector.canvas, selector.context);
    spin();
});

init('container');
names = names.sort(function() {return 0.5 - Math.random()})
createWheel(names);
createPointer(0);
drawStage();

function spin() {
    //console.log('spinAngle ' + spinAngle);
    if (spinAngleStart<0) {
        spinAngleStart = getRandomRangeWhole(360,360*4);
        spinAngle=0;
        spinRate=10;
        spinAlt =0.2;
        spinReverseAngle = -1;
        intervalHandle = setInterval(function(){spin();}, 1000/fps);
        console.log('started rotation' + spinAngleStart);
        return;
    } 
    if (spinAngle>spinAngleStart-360) {
        spinRate-=spinAlt;
        if (spinRate<1) {
            spinRate=1;
        }
    }
    //console.log('spinRate '+spinRate);
    spinAngle+=spinRate;
    if (spinReverseAngle>=0) {
        spinReverseAngle+=spinRate;
    }
    if (spinAngle >= spinAngleStart) {
        clearInterval(intervalHandle);
        highlightWinner(spinAngleStart-spinReverseAngle);
        spinAngleStart=-1;
    } else {
        setPointer();
        drawStage();
    }
}

function setPointer(){
    // when the spinAngle is such that the pegs would...