Using Javascript or JQuery, how can i get the RGB color where ever the mouse is moving specially in IMG or DIV elements
<p>I have a <code>&lt;img src="/meAndMy/face.jpg" /&gt;</code>. I am trying to get the RGB colors 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>
