title: Using JavaScript or jQuery, how can I get the RGB color where ever the mouse is moving specially in <img> or <div> elements
body: <p>I have an image, <code>&lt;img src="/meAndMy/face.jpg" /&gt;</code>. I am trying to get the RGB color when ever or where ever I move my mouse cursor.</p>
  
  <p>How can I do this with jQuery or plain JavaScript? e.g: <a href="http://www.script-tutorials.com/demos/158/index.html" rel="nofollow">http://www.script-tutorials.com/demos/158/index.html</a></p>
  
  <p><strong>Follow up (for copy paste testing):</strong></p>
  
  <pre><code>&lt;?=$this-&gt;headScript(); ?&gt;
  &lt;script&gt;
  $(document).ready(function()
  {
  
     var image = new Image();
     var ctx = $('#panel')[0].getContext("2d");
  
     /* Load the picture empty.jpg */
     image.onload = function () 
     {
       ctx.drawImage(image, 0, 0, image.width, image.height);
     }
     /* How can i reload later new?
        image.empty; */
     image.src = "/agents/empty.jpg";
  
     /* On mouse over to my image, show me the background with RGB  
        change mousemove to click if requires */
     $('#panel').mousemove(function(e) 
     { 
      /* Leave as it is */
      var canvasOffset = $(this).offset();
      var canvasX = Math.floor(e.pageX - canvasOffset.left);
      var canvasY = Math.floor(e.pageY - canvasOffset.top);
      var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);
      var pixel = imageData.data;    
      var pixelColor = "rgba("+pixel[0]+", "+pixel[1]+", "+pixel[2]+", "+pixel[3]+")";
  
      /* Meat */
      $(document.body).css('background-color',pixelColor);
  
     });
  
  });
  
  &lt;/script&gt;
  
  &lt;body&gt;
    &lt;canvas id="panel" width="500" height="333"&gt;&lt;/canvas&gt;
  &lt;body&gt;
  </code></pre>