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

npm install qunit-assert-canvas
1 downloads in the last day
2 downloads in the last week
7 downloads in the last month

Build Status NPM version

QUnit Canvas assertion plugin

This plugin for QUnit adds a pixelEqual assertion method to test individual pixel values in a given canvas.


assert.pixelEqual(canvas, x, y, r, g, b, a, message);


  • canvas: Reference to a canvas element
  • x, y: Coordinates of the pixel to test
  • r, g, b, a: The color and opacity value of the pixel that you except
  • 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);

For more examples, refer to the unit tests.

npm loves you