Hover-state of individual canvas regions

Question

JavaScript

Hello! There was a problem with the implementation of the hover-state of individual areas of the canvas.
Suppose there are two 40 pixel squares on a 40x80 canvas. Understanding which area to highlight (when assigning a mousemove handler) is not a problem, the problem is to change (for example, darken) the area only once, and when the pointer has left the desired space, return the original view of the area. I'm sorry if this is a dumb question - I'm just learning canvas. Thanks in advance for your advice.

Answer 1

depends on how you work with it.
1) if it is not known what is drawn, then the tag has a .toDataURL() method - get bas64, i.e. you can save what is now drawn in png24 and then return it back (you can overlay this picture on a timer with transparency);
2) you can overlay several canvas tags on top of each other, if background: transparent - dynamics can be shown on it;
3) if there is any sequence of commands for "coloring", then it is enough to clear the canvas and play it back.
and, judging by the “two squares of 40 pixels”, the third option suits you: remember what and where you need to display - and no problems.