Integration Testing the Canvas

Question

I have been experimenting with methods over the past couple of weeks trying to find the best method to use BDD for a web application that is relient on the HTML5 canvas element, and user interaction with it.

I have been using Jasmine and Cucumber with Rspec, to spec and integration test every part of my application but any attempt I have had to integration test the canvas has come up... unsuccessful. I wrote a jQuery plugin that handles interaction with the canvas as well as initializing it.

I wanted to Intergration test the actual drawing on the canvas, making sure that when you call something like

$("canvas").draw("lineTo", 10, 10)

there is actually a line created on the canvas element at the points (10,10). This is what has proved changeling, I have tried to use the contextual method getImageData() on any drawn pixels. This has lead me into a hole, no matter how I query the canvas I get pixel data representing a black transparent pixel, which by the MDC says I am querying the canvas out of context.

This I think is an issue with the Jasmine gem with RoR. If I could solve that issue I would be golden but it is not the only solution I am willing to accept. I really would like to help think of an effective way to integration test the canvas even if I am not actually checking the pixel data directly.

Thanks any one for your help, this is really run me into a block.

Answer 1

I have written a tool, js-imagediff, which integrates with Jasmine for testing canvas. You can see an example here: unit testing canvas with javascript imagediff and jasmine. Let me know if this is useful.

It does use getImageData to do the diff, however. Are you getting specific errors with that call? Or do you have a link to the MDC page you are referring to?