Feat/webgl context attributes

packages/skia/src/renderer/Canvas.tsx

@@ -56,6 +56,28 @@ export interface CanvasProps extends Omit<ViewProps, "onLayout"> {
   onSize?: SharedValue<SkSize>;
   colorSpace?: "p3" | "srgb";
   ref?: React.Ref<CanvasRef>;
+  /**
+   * WebGL context attributes for web platform.
+   * Allows configuration of the WebGL rendering context.
+   * Only applicable when running on web platform.
+   * 
+   * Note: Boolean values will be automatically converted to 0/1 for CanvasKit compatibility.
+   */
+  webglContextAttributes?: {
+    alpha?: boolean;
+    depth?: boolean;
+    stencil?: boolean;
+    antialias?: boolean;
+    premultipliedAlpha?: boolean;
+    preserveDrawingBuffer?: boolean;
+    preferLowPowerToHighPerformance?: boolean;
+    failIfMajorPerformanceCaveat?: boolean;
+    enableExtensionsByDefault?: boolean;
+    explicitSwapControl?: boolean;
+    renderViaOffscreenBackBuffer?: boolean;
+    majorVersion?: number;
+    minorVersion?: number;
+  };
 }
 
 export const Canvas = ({

packages/skia/src/specs/SkiaPictureViewNativeComponent.web.ts

@@ -7,20 +7,37 @@ export interface NativeProps extends ViewProps {
   debug?: boolean;
   opaque?: boolean;
   nativeID: string;
+  webglContextAttributes?: {
+    alpha?: boolean;
+    depth?: boolean;
+    stencil?: boolean;
+    antialias?: boolean;
+    premultipliedAlpha?: boolean;
+    preserveDrawingBuffer?: boolean;
+    preferLowPowerToHighPerformance?: boolean;
+    failIfMajorPerformanceCaveat?: boolean;
+    enableExtensionsByDefault?: boolean;
+    explicitSwapControl?: boolean;
+    renderViaOffscreenBackBuffer?: boolean;
+    majorVersion?: number;
+    minorVersion?: number;
+  };
 }
 
 const SkiaPictureViewNativeComponent = ({
   nativeID,
   debug,
   opaque,
   onLayout,
+  webglContextAttributes,
   ...viewProps
 }: NativeProps) => {
   return createElement(SkiaPictureView, {
     nativeID,
     debug,
     opaque,
     onLayout,
+    webglContextAttributes,
     ...viewProps,
   });
 };

packages/skia/src/views/SkiaBaseWebView.tsx

@@ -41,7 +41,31 @@ export abstract class SkiaBaseWebView<
       this.height = canvas.clientHeight;
       canvas.width = this.width * pd;
       canvas.height = this.height * pd;
-      const surface = CanvasKit.MakeWebGLCanvasSurface(canvas);
+
+      // Convert WebGL context attributes from boolean to numeric for CanvasKit
+      let contextAttributes: Record<string, number> | undefined;
+      if (this.props.webglContextAttributes) {
+        contextAttributes = {};
+        const attrs = this.props.webglContextAttributes;
+
+        // Iterate through all attributes and convert booleans to 0/1
+        for (const [key, value] of Object.entries(attrs)) {
+          if (value !== undefined) {
+            // Convert boolean to number (0/1), pass through numbers as-is
+            if (typeof value === "boolean") {
+              contextAttributes[key] = value ? 1 : 0;
+            } else {
+              contextAttributes[key] = value;
+            }
+          }
+        }
+      }
+
+      const surface = CanvasKit.MakeWebGLCanvasSurface(
+        canvas,
+        undefined, // colorSpace - using undefined to maintain default
+        contextAttributes
+      );
       const ctx = canvas.getContext("webgl2");
       if (ctx) {
         ctx.drawingBufferColorSpace = "display-p3";

packages/skia/src/views/types.ts

@@ -31,6 +31,29 @@ export interface SkiaBaseViewProps extends ViewProps {
   onSize?: SharedValue<SkSize>;
 
   opaque?: boolean;
+
+  /**
+   * WebGL context attributes for web platform.
+   * Allows configuration of the WebGL rendering context.
+   * Only applicable when running on web platform.
+   * 
+   * Note: Boolean values will be automatically converted to 0/1 for CanvasKit compatibility.
+   */
+  webglContextAttributes?: {
+    alpha?: boolean;
+    depth?: boolean;
+    stencil?: boolean;
+    antialias?: boolean;
+    premultipliedAlpha?: boolean;
+    preserveDrawingBuffer?: boolean;
+    preferLowPowerToHighPerformance?: boolean;
+    failIfMajorPerformanceCaveat?: boolean;
+    enableExtensionsByDefault?: boolean;
+    explicitSwapControl?: boolean;
+    renderViaOffscreenBackBuffer?: boolean;
+    majorVersion?: number;
+    minorVersion?: number;
+  };
 }
 
 export interface SkiaPictureViewNativeProps extends SkiaBaseViewProps {