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> 

Answer 1

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.