title: JS Draw a multicolor spiral in JavaScript
body: <p><br />
  I'm trying to draw a multicoloured archimedean spiral on a HTML5 canvas.<br />
  My final goal is to make a datavisualisation of a sound record, it would be a kind of static spiral timeline. Each color represents an event in the sound record.<br /><br />
  I checked for many days on the web but couldn't find something really matching my goal.
  I'm used to PHP but not to JS.
  I got the <a href="http://jsfiddle.net/jingshaochen/xJc7M/" rel="nofollow">base source code for drawing a spiral</a> in my script.</p>
  
  <p>The point is I'm getting the hexadecimal value and the length in pixels for each color from a json array.<br />Each coloured section should follow each other right after on the spiral, no shading effects.<br />
  I don't know how to get the ending position of the last coloured section to start drawing the new colour section. The result of the following code makes all the colors superimposed.</p>
  
  <p>Thanks for your help !</p>
  
  <p>Here's my JS code :</p>
  
  <pre><code>var lengthOfColors = ["29.47965973","45.35332267","70.29765013"]; 
  var colorCodes = ["#000","#807f29","#c0c0c0"]; // the real arrays are much longers
  
  var c = document.getElementById('c');
  var context = c.getContext("2d");
  var centerx = context.canvas.width / 2;
  var centery = context.canvas.height / 2;
  
  $('#draw').click(function() 
  {
  a = parseFloat($('#a').val());
      b = parseFloat($('#b').val()); //The user can define Cosinus and Sinus
  
      context.clearRect(0, 0, 600, 600);
  context.beginPath();
  context.moveTo(centerx, centery);
  
  for (var beg = 0, end = lengthOfColors.length; beg &lt; end; beg++)
    {
    for (i = 0; i &lt; lengthOfColors[beg]; i++)
      {
      angle = 0.1 * i;//Angle of line rotation = 0.1
      x = centerx + (a * angle) * Math.cos(angle);
      y = centery + (b * angle) * Math.sin(angle);
      context.lineTo(x, y);
      }
    context.strokeStyle = colorCodes[beg];
    context.stroke();//draw the path
    };
  });
  </code></pre>
  
  <p>Here's my HTML code :</p>
  
  <pre><code>&lt;canvas id="c" width="600" height="600"&gt;&lt;/canvas&gt;
  &lt;br/&gt;
  Cosinus: &lt;input id="a" type="text" value='1'/&gt;
  &lt;br/&gt;
  Sinus: &lt;input id="b" type="text" value='1'/&gt;
  &lt;br/&gt;
  &lt;button id="draw"&gt;Draw&lt;/button&gt; 
  </code></pre>