Testing HTML5 canvas in Grunt, qUnit and PhantomJS - gruntjs

Question

I'm trying to create a simple qUnit test that should run in grunt and phantomJs using grunt-contrib-qunit.
The test runs fine in qUnit, but fails when using grunt and phantomJS.
The test code is:
test("testing the filter", function() {
var img = new Image(3, 2);
// this is a 3x2 image
img.src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAIAAAASFvFNAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wIFDScubGmL8QAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAG0lEQVQI1wXBAQ0AAAwCINz7hzKZhwzDLjTaPDVzBUhAyQZRAAAAAElFTkSuQmCC";
var canvas = document.createElement('canvas');
canvas.width = 3,
canvas.height = 2;
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
ok(ctx.getImageData(0,0,1,1).data[0] === 255, 'Expected red-pixel to be 255, actually is ' + ctx.getImageData(0,0,1,1).data[0])
})
When I run this in a browser based qUnit, the test passes. When I run this in Grunt, using PhantomJS and qUnit, the test fails. As best I can tell, drawImage is failing silently, so it's not writing the pixels.
Everything else seems to be working correctly. All my other tests run fine, including DOM manipulation tests. It's just this one function that doesn't appear to work correctly.

Answer 1

It turns out that I was making this much more complex than it had to be. The image simply wasn't loaded at the time I was trying to draw the canvas. Fortunately, there is a way to do an asynchronous test in qUnit, so all I had to do was run the test after the image was loaded.
The weirdness was that it was running correctly in the browser based qUnit tests, but not phantomJs.
The working code is below:
test("testing the filter", function( assert ) {
var done = assert.async();
var img = document.createElement('img');
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = 3,
canvas.height = 2;
img.addEventListener("load", function() {
ctx.drawImage(img, 0, 0);
ok(ctx.getImageData(0,0,1,1).data[0] === 255, 'Expected red-pixel to be 255, actually is ' + ctx.getImageData(0,0,1,1).data[0]);
done();
})
// this is a 3x2 image
img.src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAIAAAASFvFNAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wIFDScubGmL8QAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAG0lEQVQI1wXBAQ0AAAwCINz7hzKZhwzDLjTaPDVzBUhAyQZRAAAAAElFTkSuQmCC";
})