title: Access element of array inside object jQuery
body: <p>I want to fill a canvas with a color that's an element of an array inside an object and the element index should be <em>i</em> but the code seems to be wrong.
  The variables inside <em>color1</em> are already declared and contain a string which is the hex value for the color.</p>
  
  <pre><code>var colorsObj = {
      color1: [orange,amber,apricot,tangerine,bittersweet,persimmon,salmon,peach,pumpkin]
  }
  
  function drawCanvas(color) {
      for(var i = 1; i &lt; 10; i++){
      $('.app').append('&lt;canvas class="shadescolors" id="shade'+i+'"  width="100" height="100"&gt;');
      var canvas = document.getElementById('shade'+i);
      var context = canvas.getContext('2d');
  
      canvas.width = window.innerWidth / 3;
      cc = canvas.width;
      radius = cc/2-10;
      canvas.height = canvas.width;
      context.beginPath();
      context.arc(cc/2, cc/2, cc/2-10, 0, Math.PI*2, true);
      alert(colorsObj.color[i]);
      context.fillStyle = colorsObj.color[i];
      context.fill();
      context.lineWidth = 2;
      context.strokeStyle = '#8A8A8A';
      context.stroke();
      }
  }
  
  drawCanvas('color1');
  </code></pre>
  
  <p>The alert doesn't fire either.</p>