Feat/webgl context attributes

packages/skia/src/renderer/Canvas.tsx

@@ -14,6 +14,7 @@ import type {
   ViewProps,
 } from "react-native";
 import { type SharedValue } from "react-native-reanimated";
+import type { WebGLOptions } from "canvaskit-wasm";
 
 import { SkiaViewNativeId } from "../views/SkiaViewNativeId";
 import SkiaPictureViewNativeComponent from "../specs/SkiaPictureViewNativeComponent";
@@ -56,6 +57,13 @@ 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.
+   * Uses CanvasKit's WebGLOptions type directly - all values must be numeric (0 or 1 for boolean flags).
+   */
+  webglContextAttributes?: WebGLOptions;
 }
 
 export const Canvas = ({

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

@@ -1,26 +1,30 @@
 import type { ViewProps } from "react-native";
 import { createElement } from "react";
+import type { WebGLOptions } from "canvaskit-wasm";
 
 import { SkiaPictureView } from "../views/SkiaPictureView.web";
 
 export interface NativeProps extends ViewProps {
   debug?: boolean;
   opaque?: boolean;
   nativeID: string;
+  webglContextAttributes?: WebGLOptions;
 }
 
 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,12 @@ export abstract class SkiaBaseWebView<
       this.height = canvas.clientHeight;
       canvas.width = this.width * pd;
       canvas.height = this.height * pd;
-      const surface = CanvasKit.MakeWebGLCanvasSurface(canvas);
+
+      const surface = CanvasKit.MakeWebGLCanvasSurface(
+        canvas,
+        undefined, // colorSpace - using undefined to maintain default
+        this.props.webglContextAttributes // undefined if not explicitly provided
+      );
       const ctx = canvas.getContext("webgl2");
       if (ctx) {
         ctx.drawingBufferColorSpace = "display-p3";

packages/skia/src/views/types.ts

@@ -1,5 +1,6 @@
 import type { ViewProps } from "react-native";
 import type { SharedValue } from "react-native-reanimated";
+import type { WebGLOptions } from "canvaskit-wasm";
 
 import type { Node } from "../dom/types";
 import type { SkImage, SkPicture, SkRect, SkSize } from "../skia/types";
@@ -31,6 +32,14 @@ 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.
+   * Uses CanvasKit's WebGLOptions type directly - all values must be numeric (0 or 1 for boolean flags).
+   */
+  webglContextAttributes?: WebGLOptions;
 }
 
 export interface SkiaPictureViewNativeProps extends SkiaBaseViewProps {