title: Looping until find some pixels with the same colors in canvas
body: <p>I'm trying to find a red color for example on a canvas, let's say I have a square painted on canvas, so I'd like to know the way to loop through that square and when I detect it get the x and y from now I have this : </p>
  
  <pre><code>var imgData = context.getImageData(face.x-1, face.y-1, 15+2, 15+2);
  var pixels = imgData.data;
  
  for (var i = 0; n = pixels.length, i &lt; n; i += 4) {
      var red = pixels[i];
      var green = pixels[i+1];
      var blue = pixels[i+2];
      var alpha = pixels[i+3];
      //red color
      if(red == 255 &amp;&amp; green == 0 &amp;&amp; blue == 0){
           //fired when color is red
      }
  </code></pre>
  
  <p><em>Note: face.x and face.y is the X and Y to position an image</em></p>
  
  <p>How can I do to loop the square let's say it's all black but 5 pixels that are red, I want to detect where is it and get the X and Y from the image in canvas</p>
  
  <p>This is my <a href="https://jsfiddle.net/srs6zj3p/1/" rel="nofollow">Jsfiddle</a>(I'm trying to find a red color for example on a canvas, let's say I have a square painted on canvas, so I'd like to know the way to loop through that square and when I detect it get the x and y from now I have this : </p>
  
  <pre><code>var imgData = context.getImageData(face.x-1, face.y-1, 15+2, 15+2);
  var pixels = imgData.data;
  
  for (var i = 0; n = pixels.length, i &lt; n; i += 4) {
      var red = pixels[i];
      var green = pixels[i+1];
      var blue = pixels[i+2];
      var alpha = pixels[i+3];
      //red color
      if(red == 255 &amp;&amp; green == 0 &amp;&amp; blue == 0){
           //fired when color is red
      }
  </code></pre>
  
  <p><em>Note: face.x and face.y is the X and Y to position an image</em></p>
  
  <p>How can I do to loop the square let's say it's all black but 5 pixels that are red, I want to detect where is it and get the X and Y from the image in canvas</p>
  
  <p>I've put this </p>
  
  <pre><code>img.src = "https://i.imgur.com/x9uJH7a.gif";
  imgCara.src = "https://i.imgur.com/vJJlYw2.png";
  </code></pre>
  
  <p>But that's only a test to show you what I'm trying to do (those img are the ones I'm using on my project) but I can't see it on jsfiddle... </p>
  
  <p>I tried to position with </p>
  
  <pre><code>var w = cara.x-1 + ((i / 4) % (imgData.width));
  var z = cara.y-1 + Math.floor((i /4)/(imgData.width));
  </code></pre>
  
  <p>But doesn't work. </p>
  
  <h2>Edit</h2>
  
  <p>I faced with this issue... </p>
  
  <p>I've created this to save the x and y: </p>
  
  <pre><code>var xy={x:2,y:2};
  </code></pre>
  
  <p>Then I adapted your loop : </p>
  
  <pre><code>function findMatchingXY(R,G,B,tolerance){
  // get the pixel data of the canvas
  var data=context.getImageData(0,0,img.width,img.height).data;
  // loop through all pixels
  for(var y=0;y&lt;img.width;y++){
      for(var x=0;x&lt;img.height;x++){
          // find the pixel data from the data[] rgba array
          //     representing the pixel at [x,y]
          var n=(y*img.width+x)*4;
          // compare this pixel's color channels with the targets
          var matchesRedTarget=Math.abs(R-data[n])&lt;tolerance;
          var matchesGreenTarget=Math.abs(G-data[n+1])&lt;tolerance;
          var matchesBlueTarget=Math.abs(B-data[n+2])&lt;tolerance;
          // does this pixel match the target
          if(data[n+3]&gt;30 &amp;&amp; matchesRedTarget
              &amp;&amp; matchesGreenTarget &amp;&amp; matchesBlueTarget){
              // return the x,y of the first matching pixel
              return({x:x,y:y});
          }
      }}
  // no matching pixels found, return null
  return(null);
  }
  </code></pre>
  
  <p>and in chrome it says : </p>
  
  <blockquote>
    <p>maze.js:26 Uncaught TypeError: Cannot read property 'x' of null</p>
  </blockquote>