fix: canvas recording patches

[daibhin]

Changes

Closes PostHog/posthog-flutter#69

Main aim is to support session recording in Flutter!

Does so in two ways:

• Support canvas capture in shadow roots

  • Query selectors do not include shadow root elements by default
  • Updates getCanvas method to also traverse shadow roots
  • Hat tip to an unmerged PR [#1412] fix Changes in the canvas within the Shadow DOM cannot be rec… rrweb-io/rrweb#1413

• Capture correct canvas size

  • Canvas elements accept width and height attributes which set the internal coordinates of the canvas
  • They cannot always be relied upon to reflect the rendered width / height of the canvas e.g. if style / class attributes are added (as is the case in the canvas Flutter renders) the canvas coordinate "size" might be different to the rendered viewport meaning the captured base64 data will look zoomed in / out
  • Use the clientWidth and clientHeight (based on this description) properties of the canvas to resize the output image when calling createImageBitmap
  • Playback goes from this to this:

Before	After

Checklist

• Tests for new code (see advice on the tests we use)
• Accounted for the impact of any changes across different browsers
• Accounted for backwards compatibility of any changes (no breaking changes in posthog-js!)

[github-actions]

Size Change: +459 B (0%)

Total Size: 942 kB

Filename	Size	Change
dist/array.full.js	224 kB	+153 B (0%)
dist/recorder-v2.js	106 kB	+153 B (0%)
dist/recorder.js	106 kB	+153 B (0%)

ℹ️ View Unchanged

Filename	Size
dist/array.js	124 kB
dist/es.js	124 kB
dist/exception-autocapture.js	12.1 kB
dist/module.js	124 kB
dist/surveys-module-previews.js	62 kB
dist/surveys.js	58.3 kB

_{compressed-size-action}

[pauldambra]

nice

I ended up switching off auto-formatting and finding out how to save without formatting no matter what to avoid adding lots of whitespacee to the patch

but that's nitpicky

[marandaneto]

nice

I ended up switching off auto-formatting and finding out how to save without formatting no matter what to avoid adding lots of whitespacee to the patch

but that's nitpicky

yeah that sounds like a good idea, its also easier to review/less chance of conflicts

[pauldambra]

@daibhin I did CMD + shift + P in vs code, found "save without formatting", and then bound some keys to it.

For me I bound CMD + S since I don't work in vscode full time. But then we'll see the diff of just the lines you changed

pretty plz and thank you 😊

[daibhin]

Moved this up based on rrweb-io/rrweb@d860a4b

[daibhin]

@pauldambra done! TIL disabling Prettier requires VS Code to be restarted to take effect

[pauldambra]

🚢

way nicer diff 😍