How do I have a player draw in game & have the accuracy be graded?

I'm making a game where the goal is to have the player get a simple photo and copy it on a canvas. The player should then be given a score based on how accurately they followed the image. Is there a way to do that?

Also, they're only using black so there's no need to worry about other colors.

I had a brief discussion with ChatGPT about this a while ago and came to the conclusion that it would be more effort to implement than I was willing to put it.

It suggested three approaches:

1. Perceptual hashing
2. Convoluted neural network (Compute a single vector for each image using a small CNN/ViT, then compare with cosine similarity.)
3. LPIPS (Learned Perceptual Image Patch Similarity)

Make of that what you will!

For more complex stuff like this you could look into something like

rsmbl.github.io/Resemble.js

It even gives you the exact percentage of similarity.

At the same time, the makeshift solution would be to

1. Have both the input and output images on a canvas of the same size

2. Loop over every pixel and compare the colors

3. Track how many comparisons are true and you can do a little simple math to get the percentage of pixels that match

Thank you so much!! I'll look more into what you've suggested!