Restore <canvas> → <img> freezer

build-system/tasks/visual-diff/index.js

@@ -76,6 +76,10 @@ const REMOVE_AMP_SCRIPTS_SNIPPET = fs.readFileSync(
   path.resolve(__dirname, 'snippets/remove-amp-scripts.js'),
   'utf8'
 );
+const FREEZE_CANVAS_IMAGE_SNIPPET = fs.readFileSync(
+  path.resolve(__dirname, 'snippets/freeze-canvas-image.js'),
+  'utf8'
+);
 const REMOVE_NO_SCRIPT_ELEMENT_SNIPPET = fs.readFileSync(
   path.resolve(__dirname, 'snippets/remove-no-script.js'),
   'utf8'
@@ -636,6 +640,7 @@ async function snapshotWebpages(browser, webpages) {
             // prepare it for snapshotting on Percy. See comments inside the
             // snippet files for description of each.
             await page.evaluate(REMOVE_AMP_SCRIPTS_SNIPPET);
+            await page.evaluate(FREEZE_CANVAS_IMAGE_SNIPPET);
             await page.evaluate(REMOVE_NO_SCRIPT_ELEMENT_SNIPPET);
 
             // Create a default set of snapshot options for Percy and modify

build-system/tasks/visual-diff/snippets/freeze-canvas-image.js

@@ -0,0 +1,14 @@
+/**
+ * @fileoverview This file is executed via Puppeteer's page.evaluate on a
+ * document to copy the current image data of the canvas to an attribute so that
+ * it will be passed in the snapshots to Percy.
+ */
+
+const canvases = document.querySelectorAll('canvas');
+canvases.forEach((canvas) => {
+  const img = document.createElement('img');
+  img.style.width = '100%'; // eslint-disable-line local/no-style-property-setting
+  img.style.height = '100%'; // eslint-disable-line local/no-style-property-setting
+  img.setAttribute('src', canvas.toDataURL());
+  canvas.replaceWith(img);
+});