A QUnit plugin for asserting individual pixel values within a Canvas element.
JavaScript HTML

README.md

Build Status NPM version

QUnit Canvas assertion plugin

This plugin for QUnit adds pixelEqual and notPixelEqual (plus alias pixelNotEqual) assertion methods to test individual pixel values in a given canvas.

Usage

assert.pixelEqual(canvas, x, y, r, g, b, a, message);
assert.notPixelEqual(canvas, x, y, r, g, b, a, message);  // Alias: `assert.pixelNotEqual`

Where:

  • canvas: Reference to a canvas element
  • x, y: Coordinates of the pixel to test
  • r, g, b: The color value (0-255) of the pixel that you expect
  • a: The opacity value (0-255) of the pixel that you expect; may be omitted or passed undefined if you want to ignore it
  • message: Optional message, same as for other assertions

Examples

module('Example module', {
  setup: function() {
    var canvas, context,
        fixtureEl = document.getElementById('qunit-fixture');
    fixtureEl.innerHTML = '<canvas width="5" height="5"></canvas>';

    canvas = fixtureEl.firstChild;
    try {
      context = canvas.getContext('2d');
    }
    catch(e) {
      // probably no canvas support, just exit
      return;
    }

    this.canvas = canvas;
    this.context = context;
  }
});

test('Example unit test', function(assert) {
  this.context.fillStyle = 'rgba(0, 0, 0, 0)';
  this.context.fillRect(0, 0, 5, 5);

  assert.pixelEqual(this.canvas, 0, 0, 0, 0, 0, 0);
  assert.notPixelEqual(this.canvas, 0, 0, 1, 1, 1, 0);
});

For more examples, refer to the unit tests.

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using grunt.