title: Getting the color value of a pixel on click of a mesh with three.js
body: <p>I'm working with the last version of three.js and I got a scene with a 2D mesh, with gradient color. The color depends of a value assigned to each vertex. I would like to get the value of every point of my gradient by clicking on it with the mouse (by getting the color, and make some math for my value)</p>
  
  <p>I tried to use a system like this one, since it works here : <a href="http://jsbin.com/wepuca/2/edit?html,js,output" rel="nofollow noreferrer">http://jsbin.com/wepuca/2/edit?html,js,output</a></p>
  
  <pre><code>var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  
  function echoColor(e){
      var imgData = ctx.getImageData(e.pageX, e.pageX, 1, 1);
      red = imgData.data[0];
      green = imgData.data[1];
      blue = imgData.data[2];
      alpha = imgData.data[3];
      console.log(red + " " + green + " " + blue + " " + alpha);  
  }
  </code></pre>
  
  <p>My problem is that this technique is used to get data from the canvas, when an image is displayed, and not a mesh. When I tried to use it on my mesh, I have that error :</p>
  
  <p>"TypeError: ctx is null" or "imageData is not a function" (depending on how I declared my canvas and his context).</p>
  
  <p>Since I didn't find if this method can be used with mesh, I'm here asking if it's possible or not, more than how to do it.</p>
  
  <p>Thanks in advance</p>