I recently built a handwriting recognition system that works in the browser. As you might imagine, the main component of the page, beside the machine learning model in the background, is the ability to draw a character in the browser.
In order to do that, you need to use the <canvas> element in html. Long story short, I created a template that you can freely use and adapt to your needs.
There are many helpful resources out there, but none that I could find had a complete template that worked both on desktop and mobile.
- a <canvas> element: as the name suggests, this is where the drawing will be happening;
- a few event listeners that check for the main mouse events (mouse down, mouse move, mouse up) and touch screen events;
- a call back function that determines the position of the mouse and draws a line when the mouse moves inside the canvas while the user is clicking;
- a button to clear the drawing.
As you can see, it is not much work, but it's always nice to start from a template instead of a blank page. So, feel free to use the template I created and please submit pull requests if you find bugs!