diff --git a/tests/page/page-screenshot.spec.ts b/tests/page/page-screenshot.spec.ts
index 9652c1d058..266fd64468 100644
--- a/tests/page/page-screenshot.spec.ts
+++ b/tests/page/page-screenshot.spec.ts
@@ -171,6 +171,36 @@ it.describe('page screenshot', () => {
     expect(screenshot).toMatchSnapshot('screenshot-canvas.png', { threshold: 0.4 });
   });
 
+  it('should capture canvas changes', async ({ page, browserName, isMac }) => {
+    it.fail(browserName === 'webkit' && isMac, 'https://github.com/microsoft/playwright/issues/8796');
+    await page.goto('data:text/html,<canvas></canvas>');
+    await page.evaluate(() => {
+      const canvas = document.querySelector('canvas');
+      canvas.width = 600;
+      canvas.height = 600;
+    });
+
+    async function addLine(step: number) {
+      await page.evaluate(n => {
+        const canvas = document.querySelector('canvas');
+        const ctx = canvas.getContext('2d');
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.moveTo(0, n * 100);
+        ctx.lineTo(300, n * 100);
+        ctx.stroke();
+      }, step);
+    }
+
+    for (let i = 0; i < 3; i++) {
+      await addLine(i);
+      // With the slight delay WebKit stops reflecting changes in the screenshots on macOS.
+      await new Promise(f => setTimeout(f, 100));
+      const screenshot = await page.screenshot();
+      expect(screenshot).toMatchSnapshot(`canvas-changes-${i}.png`);
+    }
+  });
+
   it('should work for webgl', async ({ page, server, browserName }) => {
     it.fixme(browserName === 'firefox' || browserName === 'webkit');
 
diff --git a/tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-0-chromium.png b/tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-0-chromium.png
new file mode 100644
index 0000000000..6fcce2cf53
Binary files /dev/null and b/tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-0-chromium.png differ
diff --git a/tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-0-firefox.png b/tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-0-firefox.png
new file mode 100644
index 0000000000..a5030e8655
Binary files /dev/null and b/tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-0-firefox.png differ
diff --git a/tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-0-webkit.png b/tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-0-webkit.png
new file mode 100644
index 0000000000..b1515c2b94
Binary files /dev/null and b/tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-0-webkit.png differ
diff --git a/tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-1-chromium.png b/tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-1-chromium.png
new file mode 100644
index 0000000000..f6f130a44a
Binary files /dev/null and b/tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-1-chromium.png differ
diff --git a/tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-1-firefox.png b/tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-1-firefox.png
new file mode 100644
index 0000000000..0235898c24
Binary files /dev/null and b/tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-1-firefox.png differ
diff --git a/tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-1-webkit.png b/tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-1-webkit.png
new file mode 100644
index 0000000000..f64458d6ab
Binary files /dev/null and b/tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-1-webkit.png differ
diff --git a/tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-2-chromium.png b/tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-2-chromium.png
new file mode 100644
index 0000000000..ecabd8b22d
Binary files /dev/null and b/tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-2-chromium.png differ
diff --git a/tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-2-firefox.png b/tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-2-firefox.png
new file mode 100644
index 0000000000..bb47b0ed4a
Binary files /dev/null and b/tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-2-firefox.png differ
diff --git a/tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-2-webkit.png b/tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-2-webkit.png
new file mode 100644
index 0000000000..ae6f0ec4e0
Binary files /dev/null and b/tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-2-webkit.png differ