I have a doodle application that saves an html5 canvas to an image in s3. I want to avoid saving blank (totally transparent) pngs if the user accidentally clicks “save” without having drawn anything. I found that even for a blank canvas the toDataURL() is never an empty string, but huge dump of data. This string appears to always remain the same value if no data is added to the canvas. So one way of detecting an empty canvas is to compare the submitted canvas data to this empty canvas data string to see if they match.
My question is, is there a more efficient way of doing this? Doing a string compare of two strings that are thousands of characters long means that we have to compare all the way to the last character if there is indeed an empty canvas submitted. Is it more efficient to first compute the md5 hash of the newly submitted canvas and then compare it to the md5 hash of the known empty canvas data string? Which is faster?
Are they any other ways of determining empty canvas?
For example: Is comparing the length of the strings a reliable test for matching empty canvas?
Can you easily detect clicks/draws? If so, you could have an initial ‘canvas empty’ boolean that gets flipped the first time the user draws anything.
Unfortunately, this wouldn’t help if the user draws something, then erases it, then saves.