title: How could I get the x,y position based on an image's pixel in a canvas?
body: <p>I want to get area (top left TO bottom right) of an Image containing a lot of surrounding white color. Something like an smart cropping tool that finds the actual image area before cropping, so unnessecary white pixels are not included in this area.</p>
  
  <p>I understand how I could iterate through the pixels of an image and each pixel consists of 4 values (RGBA). Is this correct?</p>
  
  <p>But if I find the first pixel that is not white. How could I get the x,y position (of the image) of that pixel (see comment in code)?</p>
  
  <pre><code>var imageSource = $("#image").attr("src");
  var img = new Image();
  img.src = imageSource; 
  
  img.onload = function(){
  
      var canvas = document.createElement("canvas");                  
      canvas.width = img.width;                   
      canvas.height = img.height;                 
      var ctx = canvas.getContext('2d');                      
      ctx.drawImage(img, 0, 0);                         
  
      //Define area of the actual iamge by getting first rgb that is not 255.
      //
      var pixels = ctx.getImageData(0, 0,  img.width, img.height);
      var data = pixels.data;
  
      //Go through pixel for pixel in the image
      //and get the first pixel that is not white
      var firstPixelNotWhite = 0;
  
      for (var i = 0, n = data.length; i &lt; n; i+= 4) {
          if (parseInt(data[i]) !== 255) {
              firstPixelNotWhite = i;
              console.log(firstPixelNotWhite);
              //How to get x,y coordinates inside this image where the first pixel is not white  
  
          }
      }
  
  }
  </code></pre>
  
  <p><strong>Background</strong>
  Why do I want this?</p>
  
  <p>I want to call a function when user hovers over an image and I do know how get which color user is hovering (on the image), but only pixel by pixel.</p>
  
  <p>The problem is that if the image contains some white and a lot of other colors, the function would be called because user is hovering on a pixel that is white. I want the function called when outside the "actual image area" and therefore my approach is to create the positions of top left and bottom right of the actual image area, so I can compare mouse position if they're within this image-area or not.</p>