Q:

How to fillRect canvas grid cell depending on mouse position?

I've pretty code about grid parameters depending on mouse coords.
CANVAS GRID DEMO HERE
I want to clear filled, selected(imoX/imoY) cell while mouse is outside the selected(imoX/imoY) cell.
It should be like:
onmouseover[CellNumberX] = fillRect()

onmouseout[CellNumberX] = strokeRect()

Any solutions ?
Thanks.

A:

You can use this hit test to see if the mouse is over a rectangle:
// mx,my == mouse coordinates, r.x,r.y,r.width,r.height == rect definition
var mouseIsInside= mx>r.x && mx<r.x+r.width && my>r.y && my<r.y+r.height;

Or use this hit test to see if the mouse is over a grid cell:
// the offsets are the top left coordinates where the grid begins
var cellX = parseInt((mx-gridLeftOffset)/cellWidth);
var cellY = parseInt((my-gridTopOffset)/cellHeight);

Example code and a Demo:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
ctx.lineWidth=3;

function reOffset(){
  var BB=canvas.getBoundingClientRect();
  offsetX=BB.left;
  offsetY=BB.top;        
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }


// define each rectangle
var rects=[];
rects.push({x:20,y:20,width:50,height:35,fill:'red'});
rects.push({x:100,y:20,width:75,height:100,fill:'blue'});
rects.push({x:200,y:50,width:75,height:50,fill:'green'});

// listen for mousemove events on the canvas
canvas.addEventListener('mousemove',function(e){handleMouseMove(e);});

draw(0,0);

function draw(mx,my){

  // clear the canvas in preparation to redraw all rects
  // in their new hovered or not-hovered state
  ctx.clearRect(0,0,cw,ch);

  // redraw each rect in the rects array
  for(var i=0;i<rects.length;i++){

    var r=rects[i];

    // is the mouse inside this rect?
    if(mx>r.x && mx<r.x+r.width && my>r.y && my<r.y+r.height){
      // it's outside so fill the rect
      ctx.strokeRect(r.x,r.y,r.width,r.height);
    }else{
      // it's inside so stroke the rect
      ctx.fillStyle=r.fill;
      ctx.fillRect(r.x,r.y,r.width,r.height);
      ctx.strokeRect(r.x,r.y,r.width,r.height);
    }
  }
}

function handleMouseMove(e){

  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  // get the mouse position
  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  // redraw all the rects
  draw(mouseX,mouseY);

}
body{ background-color: ivory; }
#canvas{border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Hover mouse over rects to remove fill</h4>
<canvas id="canvas" width=300 height=300></canvas>

