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


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.


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


  • 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


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

    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.


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.