How to draw in javascript canvas and compare it to a shape?

Question

so to keep it short I\'m wondering how would I be able to track a user drawing from the moment they click to when they let go and compare it to check its accuracy with say, a pe

Answer 1

Here's how i would do to compare a figure : I would let globalComposite operation 'xor' mode do the 'substraction' of the right figure, then, with getImageData, count the non-null pixels to estimate the error.

Steps :
• Let the user draw and store the points coordinates.
• When figure is complete, compute the figure bounding box (min/max on x/y basically).
• Draw again the figure (as a filled polygon) on a temporary canvas having the size of the bbox.
• Set globalComposite to 'xor', and draw what would be the perfect figure on this canvas.
• Grab the imageData of the canvas and count non-null pixels.
• Compute the 'score' out of non-null pixels count vs canvas size. I suppose that less than 5% error is perfect, less than 25% is very good... Only trying can tell.