diff --git a/packages/skia/src/renderer/Canvas.tsx b/packages/skia/src/renderer/Canvas.tsx index 7ba53a5efa..447bb687d7 100644 --- a/packages/skia/src/renderer/Canvas.tsx +++ b/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 { onSize?: SharedValue; colorSpace?: "p3" | "srgb"; ref?: React.Ref; + /** + * 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 = ({ diff --git a/packages/skia/src/specs/SkiaPictureViewNativeComponent.web.ts b/packages/skia/src/specs/SkiaPictureViewNativeComponent.web.ts index fd74cc2739..6e31797569 100644 --- a/packages/skia/src/specs/SkiaPictureViewNativeComponent.web.ts +++ b/packages/skia/src/specs/SkiaPictureViewNativeComponent.web.ts @@ -1,5 +1,6 @@ import type { ViewProps } from "react-native"; import { createElement } from "react"; +import type { WebGLOptions } from "canvaskit-wasm"; import { SkiaPictureView } from "../views/SkiaPictureView.web"; @@ -7,6 +8,7 @@ export interface NativeProps extends ViewProps { debug?: boolean; opaque?: boolean; nativeID: string; + webglContextAttributes?: WebGLOptions; } const SkiaPictureViewNativeComponent = ({ @@ -14,6 +16,7 @@ const SkiaPictureViewNativeComponent = ({ debug, opaque, onLayout, + webglContextAttributes, ...viewProps }: NativeProps) => { return createElement(SkiaPictureView, { @@ -21,6 +24,7 @@ const SkiaPictureViewNativeComponent = ({ debug, opaque, onLayout, + webglContextAttributes, ...viewProps, }); }; diff --git a/packages/skia/src/views/SkiaBaseWebView.tsx b/packages/skia/src/views/SkiaBaseWebView.tsx index d7f16d5ef2..49b8a84ec0 100644 --- a/packages/skia/src/views/SkiaBaseWebView.tsx +++ b/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"; diff --git a/packages/skia/src/views/types.ts b/packages/skia/src/views/types.ts index 224024a3f6..c1dce2a249 100644 --- a/packages/skia/src/views/types.ts +++ b/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; 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 {