title: Draw a matrix on html5 canvas with image and detecting certain color
body: <p>I want to draw a matrix on a html5 canvas with image. For example the matrix will be like below:</p>
  
  <pre><code>var matrix = [
      [0, 0, 0, 1, 0],
      [1, 0, 0, 0, 1],
      [0, 0, 1, 0, 0],
  ];
  </code></pre>
  
  <p>I want to detect a particular color on the canvas, say "red". All the pixels where red color is there the matrix value will be "1", every other color it will be "0". Is this practically possible?</p>
  
  <ol>
  <li>Can we draw matrix on image canvas?</li>
  <li>Can we detect color and set/update matrix value?</li>
  </ol>
  
  <p>This is to use with <a href="https://github.com/qiao/PathFinding.js" rel="nofollow">this js library</a>.I am trying to build a small indoor assistance system, where in a user can navigate from one point to other with this. I saw an <a href="http://experiments.hertzen.com/pathfinding/examples/map.html" rel="nofollow">example</a> similar to this, but can't make out how its done. </p>