title: How to fillstyle with Images in canvas html5
body: <p>I am using this spin wheel </p>
  
  <p><a href="http://tpstatic.com/_sotc/sites/default/files/1010/source/roulettewheel.html" rel="nofollow noreferrer">http://tpstatic.com/_sotc/sites/default/files/1010/source/roulettewheel.html</a></p>
  
  <p>I want to change the background color to background images. I don't have a clue how to do it. If someone is kind enough to show me the path of adding images to canvas shapes /elements. I know it has something to do with fillStyle(). Here is the code:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html;charset=windows-1252"&gt;
   &lt;/head&gt;
   &lt;body&gt;
       &lt;input type="button" value="spin" onclick="spin();" style="float: left;"&gt;
   &lt;canvas id="wheelcanvas" width="600" height="600"&gt;&lt;/canvas&gt;
   &lt;script type="application/javascript"&gt;
  
      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 ctx;
  
    function draw() {
     drawRouletteWheel();
    }
  
   function drawRouletteWheel() {
   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,600,600);
  
  
    ctx.strokeStyle = "green";
    ctx.lineWidth = 1;
  
    ctx.font = 'bold 14px sans-serif';
  
    for(var i = 0; i &lt; 14; 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 = restaraunts[i];
      ctx.fillText(text, -ctx.measureText(text).width /2, 2);
      ctx.restore();
    } 
  
    //Arrow
    ctx.fillStyle = "green";
    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, 250 - (outsideRadius - 5));
    ctx.lineTo(250 + 0, 250 - (outsideRadius - 13));
    ctx.lineTo(250 - 9, 250 - (outsideRadius - 5));
    ctx.lineTo(250 - 4, 250 - (outsideRadius - 5));
    ctx.lineTo(250 - 4, 250 - (outsideRadius + 5));
    ctx.fill();
   }
  }
  
  function spin() {
   spinAngleStart = Math.random() * 10 + 10;
   spinTime = 0;
   spinTimeTotal = Math.random() * 3 + 4 * 1000;
   rotateWheel();
  }
  
  function rotateWheel() {
  spinTime += 30;
  if(spinTime &gt;= spinTimeTotal) {
    stopRotateWheel();
    return;
  }
  var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
  startAngle += (spinAngle * Math.PI / 180);
  drawRouletteWheel();
  spinTimeout = setTimeout('rotateWheel()', 30);
  }
  
  function stopRotateWheel() {
  clearTimeout(spinTimeout);
  var degrees = startAngle * 180 / Math.PI + 90;
  var arcd = arc * 180 / Math.PI;
  var index = Math.floor((360 - degrees % 360) / arcd);
  ctx.save();
  ctx.font = 'bold 30px sans-serif';
  var text = restaraunts[index]
  ctx.fillText(text, 250 - ctx.measureText(text).width / 2, 250 + 10);
  ctx.restore();
  }
  
  function easeOut(t, b, c, d) {
  var ts = (t/=d)*t;
  var tc = ts*t;
  return b+c*(tc + -3*ts + 3*t);
  }
  
  draw();
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the preview of an empty spin wheel. I want to put different images on each of them.<img src="https://i.stack.imgur.com/KlLRM.png" alt="Spin Wheel Image"></p>