This past spring I embarked down a path that no developer should ever take - I decided to fully recreate a text input in HTML5 canvas for our HTML5 game, CasinoRPG. It became clear that this was necessary for our game if we wanted a fully seamless experience. For the most part, CanvasInput has worked well enough, but there were several nagging issues that I hadn't been able to nail down:
- Most non-USA keyboards had issues with some of their inputs.
- There was no support for copying text.
- There was no support for caps lock.
- And generally, there were other little annoyances.
The good news is that I finally came to my senses and realized there was an obvious solution to all of these problems. No, it wasn't scrapping this project and going back to the DOM, but it does involve more DOM interaction.
CanvasInput v1.1.0 now creates a hidden text input for each CanvasInput you create. When focus is given to a CanvasInput, it passes that focus onto the hidden text input. Then, there is new logic in the library that syncs the state of the CanvasInput with the hidden input and the other way around. This allows full native support for all of the above issues, while still rendering and controlling everything within the HTML5 canvas.
The result of all of this is a full HTML5 canvas implementation of text input that feels just like a DOM text input, with some added goodies. It also means that the footprint of the library is even lighter than before! You can get the full source, documentation and try out demos at the original blog post here: