title: How do I implement color collision in JavaScript using getImageData?
body: <p>In my code:</p>
  
  <pre><code>var canvas = document.createElement('canvas');
  canvas.width = 1600;
  canvas.height = 900;
  document.body.appendChild(canvas);
  
  var similarX = 0;
  var similarY = 0;
  
  document.addEventListener('mousemove',function(event){
  
      similarX = event.clientX;
      similarY = event.clientY;
      document.getElementById('body').innerHTML = "x:" + similarX + ", y:" + similarY +", imgData:" + pixelData;
  var pixelData = rect.getImageData(60, 60, 1, 1).data;
  })
  
  
  window.addEventListener('load' , start);
  
  var c = canvas.getContext('2d')
  var rect = canvas.getContext ('2d')
  var circle = canvas.getContext ('2d')
  
  function start() {
      c.clearRect(0, 0, 1600, 900);
      c.fillStyle = 'green' ;
      c.fillRect(similarX - 12, similarY - 50, 20, 20);
      rect.fillStyle = 'black';
      rect.fillRect(50,50,80,80);
      window.requestAnimationFrame(start)
  
  
  }
  
  document.body.appendChild(canvas);
  </code></pre>
  
  <p>I want to detect what color are the pixels around the green player square so that if it touches the black box, it is detected by a getImageData() command? I tried reading the other posts, but I couldn't find a way to use them. Is there a solution that can easily be placed inside the code?</p>