Tengo un lienzo ejecutando un juego. Puedes moverte en dicho juego usando wasd y teclas de flecha y demás. A la izquierda, hay algunas configuraciones en HTML que, cuando se editan, realizan cambios en vivo en el juego. El problema es que, al escribir en las áreas de configuración, el lienzo aún toma entradas clave. Entonces, por ejemplo, si tuviera que escribir "puntos" en el área de configuración, el lienzo capturaría la "s" y se movería hacia atrás en el juego. Sin embargo, todavía se escribiría en el área de configuración.

La solución que se me ocurrió es cancelar todas las entradas clave al lienzo si el lienzo no tiene el foco.

Intenté usar document.activeElement!==canvas y eso no funcionó. Hizo que el lienzo no aceptara entradas clave, ya sea que tuviera foco o no.

También intenté pegar todo lo demás en un div con una identificación de "notcanvas", usando document.activeElement==notcanvas , que tampoco funcionó. Hizo que el lienzo siempre aceptara entradas clave, independientemente de si tenía foco o no.

Anteriormente en el desarrollo del "área HTML de configuración", tenía un área de texto grande, a partir de la cual ingresaba algo de texto. Verificar si esa área de texto tenía el foco funcionó, pero ahora estoy usando múltiples áreas de texto y entradas de formulario, por lo que tener cada uno de ellos exclusivamente en la verificación de enfoque no es una buena solución, ya que puedo agregarle más, y no quiero para volver a él cada vez para agregar otro elemento HTML singular para verificar.

Entonces, ¿hay alguna forma breve de verificar si un lienzo tiene foco? ¿Es un lienzo incluso capaz de tener foco?

El enlace al proyecto con el problema está aquí: https://replit.com/@KittyCraft0/3D-modeling-software-5#script.js:46:32