title: How to GET fill color of HTML5 canvas element?
body: <p>There is grid of 10,000 squares, when the cursor hovers over any one of the squares its colour should change and the color of the squares should revert back to its original color once the mouse cursor is no longer over the aforementioned square.
   So to revert those squares back to their original color I need their fill color/style.</p>
  
  <p>Although the canvas has a pattern in practice the colors may be random on the grid.</p>
  
  <p>EDIT: The functionality has still not been achieved using getImageData(),code has been written with the function. </p>
  
  <p>Here is the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "#FF0000";
  var x = 0,
    i = 0;
  var y = 0,
    j = 0;
  slotSize = 10;
  for (x = 0, i = 0; i &lt; 100; x += slotSize, i++) {
    for (y = 0, j = 0; j &lt; 100; y += slotSize, j++) {
      if ((Math.floor(i / 10)) % 2 == 0 &amp;&amp; (Math.floor(j / 10)) % 2 == 0) //required for creating the pattern
      {
        ctx.fillStyle = "red"
      } else {
        ctx.fillStyle = "yellow";
      }
      ctx.strokeRect(x, y, slotSize, slotSize);
      ctx.fillRect(x, y, slotSize, slotSize);
    }
  }
  
  function getCursorPosition(canvas, event) {
    var rect = canvas.getBoundingClientRect();
    var x = event.clientX - rect.left;
    var y = event.clientY - rect.top;
    return {
      x: x,
      y: y
    }
  }
  var basex = 20,
    basey = 20;
  
  function occupy(style, row, col) {
    console.log("occupy called with" + style)
    ctx.fillStyle = style;
    cx = slotSize * row;
    cy = slotSize * col;
    ctx.fillRect(cx, cy, slotSize, slotSize);
    ctx.strokeRect(cx, cy, slotSize, slotSize);
  }
  var row = 0,
    col = 0;
  
  function highlight(event) // 
    {
      var coords = getCursorPosition(canvas, event);
      var x = coords.x;
      var y = coords.y;
      if (row != Math.floor(x / slotSize) || col != Math.floor(y / slotSize)) {
        var color = getColor(row, col); //working errantly
        occupy(color, row, col); //&lt;--- problem line used to get the orginal color of boxes back
        row = Math.floor(x / slotSize); //to truncate to int since all number are float by default
        col = Math.floor(y / slotSize);
        document.getElementById("info").innerHTML = x + "," + y + "  " + row + "," + col;
        occupy("#ffffff", row, col); // highlighting color
      }
    }
  
  function getColor(row, col) {
    var x = slotSize * row;
    var y = slotSize * col;
    var dat = ctx.getImageData(x, y, 1, 1);
    console.log(dat.data[0] + " " + dat.data[1] + " " + dat.data[2]);
    var color = "#" + rgbToHex(dat.data[0], dat.data[1], dat.data[2]);
    return color;
  }
  
  function rgbToHex(r, g, b) {
    if (r &lt;= 255 &amp;&amp; g &lt;= 255 &amp;&amp; b &lt;= 255) {
      rh = r.toString(16);
      gh = g.toString(16);
      bh = b.toString(16);
      while (rh.length &lt; 2) {
        rh = "0" + rh;
      }
      while (gh.length &lt; 2) {
        gh = "0" + gh;
      }
      while (bh.length &lt; 2) {
        bh = "0" + bh;
      }
      color = rh + gh + bh;
      console.log(color + " " + rh + " " + gh + " " + bh);
      return color;
    } else
      console.log("invalid color values" + r + " " + g + " " + b);
  }
  
  function clear(event) {
    var coords = relMouseCoords(event);
    row = (coords.x / slotSize);
    col = (coords.y / slotSize);
    occupy("#ffffff", row, col);
  }
  document.getElementById("b").setAttribute("onClick", "occupy('red',1,2)");
  document.getElementById("canvas").setAttribute("onmousemove", "highlight(event)");
  document.getElementById("canvas").setAttribute("onmouseout", "clear(event)");</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;canvas id="canvas" width="1000" height="1000" style="border:1px solid #c3c3c3;"&gt;
          Your browser does not support the canvas element.
        &lt;/canvas&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;button id="b"&gt;fill&lt;/button&gt;
        &lt;p id="info"&gt;&lt;/p&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>