How to GET fill color of HTML5 canvas element?

Question

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.

Although the canvas has a pattern in practice the colors may be random on the grid.

EDIT: The functionality has still not been achieved using getImageData(),code has been written with the function.

Here is the 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 < 100; x += slotSize, i++) {
  for (y = 0, j = 0; j < 100; y += slotSize, j++) {
    if ((Math.floor(i / 10)) % 2 == 0 && (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); //<--- 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 <= 255 && g <= 255 && b <= 255) {
    rh = r.toString(16);
    gh = g.toString(16);
    bh = b.toString(16);
    while (rh.length < 2) {
      rh = "0" + rh;
    }
    while (gh.length < 2) {
      gh = "0" + gh;
    }
    while (bh.length < 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)");

<table>
  <tr>
    <td>
      <canvas id="canvas" width="1000" height="1000" style="border:1px solid #c3c3c3;">
        Your browser does not support the canvas element.
      </canvas>
    </td>
    <td>
      <button id="b">fill</button>
      <p id="info"></p>
    </td>
  </tr>
</table>

Can you try to explain just a little bit about what you are tring to do here? Does it have to be a canvas that you are coloring? — Kristian Barrett, Dec 25 '15 at 11:58
yes the canvas is part of a game.if you don't get the problem go ahead and execute it.Basically I want hover functionality which doesn't ruin the contents of the canvas.So if I hover over a red square it should change to blue color, once I remove the cursor over that square it should revert back to a red square. So just focus on occupy and highlight functions, if it makes it any easier — Sidwa, Dec 25 '15 at 12:16

score 0 · Answer 1 · answered Dec 25 '15 at 12:28

0

Every time you highlight a square, you first save its original color. Then, when you un-highlight it, simply apply the color back.

And if you don't have a color value store somewhere (for example, if you're randomly building the board on a pixel level), you can always read the hovering pixel color.

answered Dec 25 '15 at 12:28

Shomz

37,421
4
57
85

I figured that out , but the function is what I couldn't find and since you suggested going to pixel level I found the answer in a related post which solves my problem. http://stackoverflow.com/questions/6735470/get-pixel-color-from-canvas-on-mouseover – Sidwa Dec 25 '15 at 14:11
Yup, `getImageData`, though don't use it for everything as it gets pretty slow as the canvas size increases. Maybe you should actually keep the square color somewhere rather than reading pixels (unless one square equals one pixel, of course) – Shomz Dec 25 '15 at 14:22
Thanks for the advice. :) – Sidwa Dec 25 '15 at 14:26

How to GET fill color of HTML5 canvas element?

1 Answers1