Function checkMatch

test/unit/visual/visualTest.js:131–261

(actual, expected, p5)

 */

export function checkMatch(actual, expected, p5) {
  let scale = Math.min(MAX_SIDE/expected.width, MAX_SIDE/expected.height);
  const ratio = expected.width / expected.height;
  const narrow = ratio !== 1;
  if (narrow) {
    scale *= 2;
  }

  for (const img of [actual, expected]) {
    img.resize(
      Math.ceil(img.width * scale),
      Math.ceil(img.height * scale)
    );
  }

  // Ensure both images have the same dimensions
  const width = expected.width;
  const height = expected.height;

  // Create canvases with background color
  const actualCanvas = p5.createGraphics(width, height);
  const expectedCanvas = p5.createGraphics(width, height);
  actualCanvas.pixelDensity(1);
  expectedCanvas.pixelDensity(1);

  actualCanvas.background(BG);
  expectedCanvas.background(BG);

  actualCanvas.image(actual, 0, 0);
  expectedCanvas.image(expected, 0, 0);

  // Load pixel data
  actualCanvas.loadPixels();
  expectedCanvas.loadPixels();

  // Create diff output canvas
  const diffCanvas = p5.createGraphics(width, height);
  diffCanvas.pixelDensity(1);
  diffCanvas.loadPixels();

  // Run pixelmatch
  const diffCount = pixelmatch(
    actualCanvas.pixels,
    expectedCanvas.pixels,
    diffCanvas.pixels,
    width,
    height,
    {
      threshold: 0.5,
      includeAA: false,
      alpha: 0.1
    }
  );

  // If no differences, return early
  if (diffCount === 0) {
    actualCanvas.remove();
    expectedCanvas.remove();