Skip to content
This repository

JavaScript / Canvas based image diff utility with Jasmine matchers for testing canvas.

tree: ca0ed5d64e

Fetching latest commit…


Cannot retrieve the latest commit at this time

Octocat-spinner-32 bin
Octocat-spinner-32 examples
Octocat-spinner-32 js
Octocat-spinner-32 lib
Octocat-spinner-32 make
Octocat-spinner-32 spec
Octocat-spinner-32 .gitignore Added node_modules to gitignore. February 14, 2012
Octocat-spinner-32 LICENSE Added license. October 26, 2011
Octocat-spinner-32 Makefile Add node test to make task February 15, 2012
Octocat-spinner-32 imagediff.js
Octocat-spinner-32 imagediff.min.js
Octocat-spinner-32 package.json


JavaScript / Canvas based imagediff utility.


  • createCanvas() create a new Canvas element.
  • createImageData(width, height) create a new ImageData object.
  • isImage(object) tests for Image object.
  • isCanvas(object) tests for Canvas object.
  • isContext(object) tests for CanvasRenderingContext2D object.
  • isImageData(object) tests for ImageData object.
  • isImageType(object) tests for any of the above.
  • toImageData(object) converts image type object to a new ImageData object.
  • equal(a, b) tests image type objects for equality.
  • diff(a, b) performs an image diff on a and b, returning a - b.
  • noConflict() removes imagediff from the global space for compatibility, returning imagediff.
  • imageDataToPNG(imageData, outputFile, (callback)) renders the imageData to png in outputFile, firing an optional callback upon save. (Node only)

Command Line

  • imagediff [-e|equal] [-t|tolerance VALUE] FILE_A FILE_B tests equality of two image files with an optional tolerance, printing 'true' or 'false'.
  • imagediff [-d|diff] FILE_A FILE_B OUTPUT_FILE renders an imagediff between two files, saving as the output file.

Unit Testing Canvas

JS ImageDiff opens up the easy testing of Canvas and other image-like objects in JavaScript. js-imagediff supplies two Jasmine matchers to make this easier.

  • toImageDiffEqual() expect a result to equal another image type.
  • toBeImageData() expect a result to be ImageData.

On failed tests, toImageDiffEqual() will display the expected image, the actual image and the imagediff of the two letting you easily spot mistakes.

To use matchers:

  beforeEach(function () {


A demo is available at A Jasmine test demo is available at A demo is available at



  • Added NPM/node.js support.
  • Added command line interface for equal and diff methods.
  • Added imageDataToPNG method for node environments.


  • Added optional width / height parameters to createCanvas for symmetry with createImageData.
  • Fixed issue with toImageDiffEqual() matcher and non Node types - will no convert ImageData and contexts to Canvas elements for display.


  • Moved library to imagediff.js
  • Added Jasmine matchers
  • Minor bug fixes, lint fixes.


Carl Sutherland

Something went wrong with that request. Please try again.