How to fix this mouseover function on canvas

Question

I made a canvas with 32x32 tiles. I wanted to stroke the tile on which the mouse is what I did (thanks to some tutorials and settings)

First, I create cPush and cUndo . cPush is called when I draw something to remember it. For cUndo , you'll see later. I also call my ctx var , and I call canvas var .

var canvas = document.getElementById('canvas'); var cPushArray = new Array(); var cStep = -1; var ctx = canvas.getContext('2d'); function cPush() { cStep++; if (cStep < cPushArray.length) { cPushArray.length = cStep; } cPushArray.push(document.getElementById('canvas').toDataURL()); } function cUndo() { if (cStep > 0) { cStep--; var canvasPic = new Image(); canvasPic.src = cPushArray[cStep]; canvasPic.onload = function () { ctx.drawImage(canvasPic, 0, 0); } } } 

I will skip some parts because they are not needed. Here I call the onmousemove function:

  canvas.onmousemove = function(e) { let rects = [], i = 0, r; let jk = 0; for(var nb = 0, l = map.terrain.length ; nb < l ; nb++) { var ligne = map.terrain[nb]; var y2 = nb * 32; for(var j = 0, k = ligne.length ; j < k ; j++, jk++) { rects[jk] = {lignej: ligne[j], x: j * 32, y: y2, w: 32, h: 32}; } } 

This first part is designed to get each map tile and save it in rects [x] . This will be useful to me later when I need certain fragments.

Now I call the function:

  map.test = function(linewidth) { this.tileset.dessinerTile(r.lignej, context, rx, ry); ctx.lineWidth = linewidth; ctx.strokeRect(rx, ry, 32, 32); } 

This is done to redraw the tiles I'm in with a stroke. ( r. = rects var , you'll see later)

Here are the rest:

  var rect = this.getBoundingClientRect(), x = e.clientX - rect.left, y = e.clientY - rect.top; while (r = rects[i++]) { ctx.beginPath(); ctx.rect(rx, ry, 32, 32); if (ctx.isPointInPath(x, y) == true) { cPush(); map.test(2); } else { cUndo(); } } }; 

Var Rect is executed to check the position of the mouse .

Now for now . For each fragment, we will check isPointinPath true . (x and y are mouse positions).

So, if true, the map.test function will draw the tile using a two-line stroke , as indicated.

If not, the last move is canceled.

What I wanted to do here:

If the mouse is on a tile, it strokes the tiles. If the mouse moves, it cancels the last move and outlines a new one.

What does he do:

If the mouse is on the tile, before you cancel the move, stroke the tile to check others. Thus, the impact lasts only 0.5 s instead of being constant until I move the mouse. I think the problem is that I use the onmousemove function? Do I need to switch to "onmousehover" or something like that? I'm completely lost ...

Thanks for the help!

RECORDING PROBLEMS (Sorry for the low FPS, this is a gif)

http://recordit.co/GokcSAoMv6