title: html5: canvas.getImageData not working correctly - Why?
body: <p>I try to get the color of the selected pixel from my canvas background-image, but all i get (as color) is 0000.
  Can you help me? Where is my error?</p>
  
  <p>My Code (js):</p>
  
  <pre><code>var canvas;
  var mouse_position = [];
  var color;
  
  $(document).ready(function(){
      canvas_element = $('&lt;canvas&gt;&lt;/canvas&gt;');
      canvas = canvas_element.get(0).getContext("2d");
      canvas_element.appendTo('body');
      init_canvas();  
  });
  
  function init_canvas(){
      var img = new Image();
      img.src = 'static/img/albatros.jpg';
      img.width = 600;
      img.height = 800;
      canvas.drawImage(img, 0, 0);
  
      $(document).mousemove(function(e){
          if(e.offsetX){
              mouse_position.x = e.offsetX;
              mouse_position.y = e.offsetY;
          }else if(e.layerY){
              mouse_position.x = e.layerX;
              mouse_position.y = e.layerY;
          }
  
          show_color();
  
      });
  }
  
  
  function show_color(){
      color  = canvas.getImageData(mouse_position.x,mouse_position.y,1,1).data;
      console.info("red: " + color[0] + " green: " + color[1] + " blue: " + color[2] + "alpha: " +color[3]);
  
  }
  </code></pre>