title: HTML 5 Canvas : Uploaded image colour picker
body: <p>I'm creating an application using html canvas and javascript. You upload and image and colour pick from it however I'm having an issue where I can only colour pick colours from a small section of the uploaded image. I've tried a few things to fix it and I'm a bit stumped. Anyone have any ideas?
  I used this to help me: <a href="http://www.webdesignerdepot.com/2013/03/how-to-create-a-color-picker-with-html5-canvas/" rel="nofollow">http://www.webdesignerdepot.com/2013/03/how-to-create-a-color-picker-with-html5-canvas/</a></p>
  
  <pre><code>&lt;canvas width="600" height="300" id="canvas_picker"&gt;&lt;/canvas&gt;
  &lt;div id="hex"&gt;HEX: &lt;input type="text"&gt;&lt;/input&gt;&lt;/div&gt;
  &lt;div id="rgb"&gt;RGB: &lt;input type="text"&gt;&lt;/input&gt;&lt;/div&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>var $files = document.getElementById('file_upload').files[0];
  var reader = new FileReader();
  reader.onload = imageIsLoaded;
  
  function imageIsLoaded(e) {
      // canvas
      var canvas = document.getElementById('canvas_picker');
      var context = canvas.getContext('2d');
      var $img = $('&lt;img&gt;', { src: e.target.result });
  
      // Draws Image
      $img.load(function() {
          context.drawImage(this,10, 10);
          $("#loader").hide();
      }); 
  }
  
  $('#canvas_picker').click(function(event){
      // getting user coordinates
      var x = event.pageX;
      var y = event.pageY;
  
      // getting image data and RGB values
      var img_data = canvas.getImageData(x,y , 1, 1).data;
      var R = img_data[0];
      var G = img_data[1];
      var B = img_data[2]; 
      var rgb = R + ',' + G + ',' + B;
      // convert RGB to HEX
      var hex = rgbToHex(R,G,B);
      // making the color the value of the input
      console.log(R);
      console.log(B);
      console.log(G);
  
      $('#rgb input').val(rgb);
      console.log(rgb);
      $('#hex input').val('#' + hex);
  });
  
  function rgbToHex(R, G, B) {
      return toHex(R) + toHex(G) + toHex(B)
  }
  
  function toHex(n) {
      n = parseInt(n, 10);
      if (isNaN(n)) 
          return "00";
  
      n = Math.max(0, Math.min(n, 255));
      return "0123456789ABCDEF".charAt((n - n % 16) / 16)  + "0123456789ABCDEF".charAt(n % 16);
  }
  reader.readAsDataURL($files);
  </code></pre>
  
  <p>when I click on a pixel outside the small area, it comes back as 0.</p>