How to add a handwriting input box in my website?

Question

Hello You all!

I am making a website for kids to learn alphabets
In that website there is a scoreboard that will display a score,
A Alphabet is given to kid to draw it in the box below the Alphabet . You can see all that in my code , But the problem is that how would i ad a handwriting-input box there. And get the data that is written in the box using JavaScript, just like google handwriting keyboard but it should be on my website.so that i would get the letter written by the kid and check whether the kid has written the letter right or wrong and give the score.

Here is my code:-
https://code.sololearn.com/WBURMgDByREJ/?ref=app

Answer 1

Ore I will try !

Answer 2

But how to find which letter the user has written

Answer 3

Arnav Kumar that's a big task ,I thought you must have figured out that already ,you need to use machine learning for that ,I have no idea about it ,Google it ,probably you will find some libraries that will ease the task

Answer 4

Arnav Kumar sorry never tried that stuff

Answer 5

Its ok Abhay

Answer 6

Use Google cloud vision API
https://cloud.google.com/vision/docs/handwriting

Answer 7

Ore can it be used to identify a kids handwriting

Answer 8

Would I have to use canvas to generate image for cloud vision api

Answer 9

Arnav Kumar Yes, that is perhaps the easiest way. Based on the documentation, the process should be similar to this.

1. The kid writes on the canvas.
2. Convert the handwriting to a base 64 encoded string with the toDataURL() function

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

3. Send the base 64 string to the vision API.

Your request may look like this in JSON
{
"requests": [
{
"image": {
"content": base64img👈
},
"features": [
{
"type": "DOCUMENT_TEXT_DETECTION"
}
]
}
]
}

4. The detected letter will be found in responses.text in the response JSON

Answer 10

Ore is there any limitations on use of this

Or how do i send json to api using JavaScript i don't know that

And is it totally free

Answer 11

There is a free tier, where you are allowed 1,000 units per Feature Request per month free. You can get started for free.
https://cloud.google.com/pricing

You can send JSON with an asynchronous request by changing the Content-Type header.

fetch(url, {
headers: {
'Content-Type': 'application/json',
},
method: 'POST',
body: jsonBody,
});

Answer 12

use canvas line method and ontouch or onpointer events to let user draw alphabets

Answer 13

Abhay do you know any api to do this for me