Feat/webgl context attributes

[gabenovig]

Description

Add webglContextAttributes prop for Canvas (web platform)

This PR adds support for configuring WebGL context attributes on the web platform, enabling features like preserveDrawingBuffer which is essential for canvas capture/screenshot functionality.

Motivation

Currently, it's not possible to capture/screenshot canvas content on web because the WebGL context is created without preserveDrawingBuffer: true. This PR allows developers to configure WebGL context attributes to enable this and other WebGL-specific features.

Changes

• Added webglContextAttributes prop to CanvasProps and SkiaBaseViewProps
• Use WebGLOptions directly for typing
• Added prop to web-specific native component spec
• Follows existing platform-specific patterns (.web.ts files)

Implementation Details

The implementation converts boolean values to numbers as required by CanvasKit's WebGLOptions interface:

• all attributes use original typing from WebGLOptions

Usage

<Canvas 
  style={{ width: 256, height: 256 }}
  webglContextAttributes={{ 
    preserveDrawingBuffer: 1,
    antialias: 1,
    alpha: 1
  }}
>
  <Fill color="blue" />
  <Circle cx={128} cy={128} r={50} color="red" />
</Canvas>

Testing

Visual Example

You can view a quick demo of this feature (not included in the PR) at this link

Platform Impact

• Web: ✅ Fully supported - enables WebGL context configuration
• iOS/Android: No impact - prop is ignored on native platforms
• Breaking changes: None - new optional prop with no effect on existing code

Checklist

• [x] TypeScript compilation passes
• [x] Linting passes
• [x] Follows existing codebase patterns
• [x] Web-only implementation (doesn't affect native)
• [x] Tested locally with canvas capture functionality

Other notes

If you'd like some extra context on why I ran into this problem and what I am trying to accomplish you can contact me [email protected], first time contributing to open source so please let me know if I am missing anything important in the contribution guidelines here. Great package that has made our work life and native apps render graphs fast and awesome! While porting our existing application to web we encountered this webGL edge case (react native for web)

[wcandillon]

and there is the CLA to be signed of course :)

[gabenovig]

@wcandillon adjusted to use WebGLOptions directly with no casting

-- going to check in with our legal team to see if they will require me to sign corporate CLA or if I can go individual

[wcandillon]

@gabenovig I have an exciting refactoring at #3349 if you want I can add the change there myself (that would take care of the CLA issue). The downside is that you wouldn't get commit authorship on this.