I have a canvas running a game. You can move around in said game using wasd and arrow keys and such. To the left of it, there are some settings in HTML which when edited make live changes to the game. The problem is, when typing in the settings areas, the canvas still takes key inputs. So, for example, if I were to type in "points" in the settings area, the canvas would capture the "s" and move backwards in the game. It would still be typed into the settings area, though.

The solution I have come up with is to cancel all key inputs to the canvas if the canvas does not have focus.

I have tried using document.activeElement!==canvas, and that did not work. It made the canvas not accept key inputs whether it had focus or not.

I also tried sticking everything else in a div with an id of "notcanvas", using document.activeElement==notcanvas, which did not work either. It made the canvas always accept key inputs, regardless of if it had focus or not.

Earlier in the development of the "settings HTML area", I had had one large text area, as of which I would input some text. Checking if that one textarea had focus worked, but now I am using multiple textareas and form inputs, so having each one of those exclusively in the focus checking is not a good solution, as I may add more to it, and don't want to go back to it each time to add yet another singular HTML element to check.

So, is there any short way to check if a canvas has focus? Is a canvas even able to have focus?

The link to the project with the problem is here: https://replit.com/@KittyCraft0/3D-modeling-software-5#script.js:46:32