title: Create a Color Picker, similar to Photoshop's, using Javascript and HTML Canvas
body: <p>I am not at all versed in Computer Graphics and am in need of creating a color picker as a javascript tool to embed in an HTML page.</p>
  
  <p>First, and looking at Photoshop's one, i thought of the RGB palette as a three-dimensional matrix. My first attempt envolved:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          var rgCanvas = document.createElement('canvas');
          rgCanvas.width = 256;
          rgCanvas.height = 256;
          rgCanvas.style.border = '3px solid black';
          for (g = 0; g &lt; 256; g++){
              for (r = 0; r &lt; 256; r++){
                  var context = rgCanvas.getContext('2d');
                  context.beginPath();
                  context.moveTo(r,g);
                  context.strokeStyle = 'rgb(' + r + ', ' + g + ', 0)';
                  context.lineTo(r+1,g+1);
                  context.stroke();
                  context.closePath();
              }
          }
  
          var bCanvas = document.createElement('canvas');
          bCanvas.width = 20;
          bCanvas.height = 256;
          bCanvas.style.border = '3px solid black';       
          for (b = 0; b &lt; 256; b++){
              var context = bCanvas.getContext('2d');
              context.beginPath();
              context.moveTo(0,b);
              context.strokeStyle = 'rgb(' + 0 + ', ' + 0 + ', ' + b + ')';
              context.lineTo(20, b);
              context.stroke();
              context.closePath();
          }
  
          document.body.appendChild(rgCanvas);
          document.body.appendChild(bCanvas);
      &lt;/script&gt;
  </code></pre>
  
  <p>this results in something like<br>
   <img src="https://i.stack.imgur.com/XPPss.png" alt="3D RGB color map"></p>
  
  <p>My thought is this is too linear, comparing to the ones i see in Photoshop and on the web.
  I would like to know the logic behind the color mapping in a picker like this:
  <img src="https://i.stack.imgur.com/fnPXC.png" alt="photoshop color picker"></p>
  
  <p>I don't really need the algorythms itself, i'm mainly trying to understand the logic.</p>
  
  <p>Thanks</p>