node package manager
We need your input. Help make JavaScript better: Take the 2017 JavaScript Ecosystem survey »


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.