[Bug]: page with multiple canvases freezes in Chrome when sampling is set

[p-mazhnik]

Preflight Checklist

• I have searched the issue tracker for a bug report that matches the one I want to file, without success.

What package is this bug report for?

rrweb

Version

2.0.0-alpha.11

Expected Behavior

Page doesn't freeze in Chrome

Actual Behavior

Page freezes

Steps to Reproduce

• open html page in Chrome browser that:
  • has multiple canvases
  • starts recording with recordCanvas: true and sampling.canvas: <number>
  • makes changes to canvases
• the page may be frozen immediately, but sometimes you have to press the refresh button (possibly several times)

Sample code can be found in https://github.com/p-mazhnik/rrweb-sample/tree/canvas-freeze-issue

Video attached

Video

rrweb-canvas-freeze.mov

Additional Information

Note that issue is not reproducible in Firefox and Safari. I suspect the issue exists in web worker, where operations with offscreen canvas somehow block the main thread in Chrome. Related report from StackOverflow: https://stackoverflow.com/questions/61475472/does-web-worker-block-on-the-main-thread-for-some-offscreencanvas-functions