title: Ploting RGB or Hex values on a Color wheel using JS/Canvas
body: <p>I have an array of processed RGB values that I would like to plot onto a colour wheel like the one below.</p>
  
  <p>eg.</p>
  
  <pre><code>RGBList = [
      {'r':231,'g':52,'b':35},
      {'r':24,'g':111,'b':24}
  ];
  </code></pre>
  
  <p>I would like each object in the example list above to be plotted as a marker/dot on top of the circle.</p>
  
  <p>I've found code to create a colour wheel in a canvas in numerous fashions, but can't for the life of me figure out or find information on converting an RGB code into a reasonable XY coordinate for the purpose of plotting.</p>
  
  <p>Colour Wheel Canvas code example: <a href="http://jsfiddle.net/yH6JE/" rel="nofollow noreferrer">http://jsfiddle.net/yH6JE/</a></p>
  
  <p>If any one can help I'd prefer if the answer be raw JS and HTML using a canvas. It's for a hobby project I'm doing and I want to plot average RGB values and also Kmeans centroids for representation of kmeans clustering (Machine Learning) just to give my results a visual representation rather than straight data.</p>
  
  <p><a href="https://i.stack.imgur.com/Nrx6x.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Nrx6x.png" alt="Colour Wheel"></a></p>