title: Reading the RGB value of a canvas pixel
body: <p>I have put an image in canvas and I want to get the RGB value of the pixels of that image  when the user moves the mouse over the image. Here is the code which I have written:</p>
  
  <p>
      
      </p>
  
  <pre><code>&lt;canvas id="myCanvas" width="200" height="200" style="border: red;border-style: dotted"&gt;
  Your browser does not support the canvas element.
  &lt;/canvas&gt;
  &lt;script&gt;
  var canvas = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");
  
  var destX = 0;
  var destY = 0;
  
  var imageObj = new Image();
  imageObj.onload = function()
  {
  context.drawImage(imageObj, destX, destY);
  };
  imageObj.src = "zain.jpg";
  
  canvas.onclick = function(e) {
      var x = e.pageX;
      var y = e.pageY;
      var canvasColor = context.getImageData(x, y, 1,1); // rgba e [0,255]
      var pixels = canvasColor.data;
      var r = pixels[0];
      var g = pixels[1];
      var b = pixels[2];
      document.body.style.backgroundColor = "rgb("+r+','+g+','+b+")";
  }
  </code></pre>