HTML Canvas Unit testing

Question

How can I unit-test Javascript that draws on an HTML canvas? Drawing on the canvas should be checked.

Answer 1

I've been looking at canvas testing recently and I've now thought about a page that allows comparing the canvas to a "known good" image version of what the canvas should look like. This would make a visual comparison quick and easy.

And maybe have a button that, assuming the output is OK, updates the image version on the server (by sending the toDataUrl() output to it). This new version can then be used for future comparisons.

Not exactly (at all) automated - but it does make comparing the output of your code easy.

Edit:

Now I've made this:

The left chart is the real canvas whilst the right is an image stored in a database of what it should look like (taken from when I know the code is working). There'll be lots of these to test all (eventually) aspects of my code.