[Bug] html2canvas Fails with preserveDrawingBuffer: true in deck.gl

[athomann]

Description

When attempting to use html2canvas to capture a screenshot of a deck.gl canvas with the preserveDrawingBuffer option set to true, the operation fails. I'm only able to see the base map from react-map-gl. The error message suggests that preserveDrawingBuffer is set to false, despite being explicitly set to true. However, directly using the toDataURL method on the canvas works as expected and does not produce any error.

I had this working in previous versions of deck.gl, but need further testing.

Flavors

• Script tag
• React
• Python/Jupyter notebook
• MapboxOverlay
• GoogleMapsOverlay
• CartoLayer
• ArcGIS

Expected Behavior

html2canvas should be able to capture the canvas image when preserveDrawingBuffer is set to true, without errors suggesting otherwise.

Actual Behavior
html2canvas fails to capture the canvas, with an error message incorrectly stating that preserveDrawingBuffer is set to false. Direct usage of toDataURL on the canvas works correctly, indicating that preserveDrawingBuffer is indeed set to true.

Steps to Reproduce

1. Set up a deck.gl environment with any basic layer and base map.
2. Configure the deck.gl instance with glOptions including { preserveDrawingBuffer: true }.
3. Attempt to capture the canvas using html2canvas.
4. Observe the failure and error message indicating that preserveDrawingBuffer is set to false.
5. Use the toDataURL method directly on the canvas to successfully capture the image.

Environment

deck.gl version: 9.0.14
Browser and version: All
OS: Mac OS Sonoma

Logs

No response

[Pessimistress]

glOptions is replaced by deviceProps in v9. The documentation should be updated.

[athomann]

Okay, great. I briefly see device mentioned in the updates section but not about deviceProps. I still see glOptions in https://deck.gl/docs/api-reference/core/deck#gloptions