Arc canvas image background

by kelvinau

HTML

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

CSS

body{ background-color: ivory; }
#canvas{border:1px solid red;}

JavaScript

var pattern1,pattern2;

var colors = ["#B8D430", "#3AB745", "#029990", "#3501CB",
              "#2E2C75", "#673A7E", "#CC0071", "#F80120",
              "#F35B20", "#FB9A00", "#FFCC00", "#FEF200","#FEF200"];
var restaraunts = ["$10", "$20", "$30", "$40",
                   "$50", "$60", "$70", "$80",
                   "$90", "$100", "$120", "$150","HELLO"];

var startAngle = 0;
var arc = Math.PI / 6;
var spinTimeout = null;

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

var canvas = document.getElementById("wheelcanvas");
var ctx = canvas.getContext("2d");


var img1=new Image();
img1.onload=start;
img1.src="http://icons.iconarchive.com/icons/custom-icon-design/all-country-flag/256/Jarvis-Island-Flag-icon.png";
var img2=new Image();
img2.onload=start;
img2.src="http://icons.iconarchive.com/icons/custom-icon-design/all-country-flag/256/Jarvis-Island-Flag-icon.png";
var imgCount=2;
function start(){
  if(--imgCount>0){return;}
  pattern1=ctx.createPattern(img1,'repeat');
  //pattern2=ctx.createPattern(img2,'repeat');
  draw();
}



function draw() {
  drawRouletteWheel();
}

function drawRouletteWheel() {
  var outsideRadius = 200;
  var textRadius = 160;
  var insideRadius = 125;

  ctx.clearRect(0,0,600,600);

  ctx.strokeStyle = "green";
  ctx.lineWidth = 1;

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

  for(var i = 0; i < 14; i++) {
    var angle = startAngle + i * arc;
    ctx.fillStyle = pattern1; //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 =...