[web] cache sample and stencil params (#38829)

* [web] cache sample and stencil params

* test and style

* Update canvaskit_api_test.dart

* Update canvaskit_api_test.dart

Author: Jonah Williams

lib/web_ui/lib/src/engine/canvaskit/canvaskit_api.dart

@@ -117,6 +117,8 @@ extension CanvasKitExtension on CanvasKit {
     int width,
     int height,
     ColorSpace colorSpace,
+    int sampleCount,
+    int stencil,
   );
   external SkSurface MakeSWCanvasSurface(DomCanvasElement canvas);
 

lib/web_ui/lib/src/engine/canvaskit/surface.dart

@@ -98,6 +98,8 @@ class Surface {
   DomCanvasElement? htmlCanvas;
   int _pixelWidth = -1;
   int _pixelHeight = -1;
+  int _sampleCount = -1;
+  int _stencilBits = -1;
 
   /// Specify the GPU resource cache limits.
   void setSkiaResourceCacheMaxBytes(int bytes) {
@@ -334,6 +336,9 @@ class Surface {
           majorVersion: webGLVersion.toDouble(),
         ),
       ).toInt();
+      if (_sampleCount == -1 || _stencilBits == -1) {
+        _initWebglParams();
+      }
 
       _glContext = glContext;
 
@@ -352,6 +357,12 @@ class Surface {
     htmlElement.append(htmlCanvas);
   }
 
+  void _initWebglParams() {
+    final WebGLContext gl = htmlCanvas!.getGlContext(webGLVersion);
+    _sampleCount = gl.getParameter(gl.samples);
+    _stencilBits = gl.getParameter(gl.stencilBits);
+  }
+
   CkSurface _createNewSurface(ui.Size size) {
     assert(htmlCanvas != null);
     if (webGLVersion == -1) {
@@ -369,6 +380,8 @@ class Surface {
         size.width.ceil(),
         size.height.ceil(),
         SkColorSpaceSRGB,
+        _sampleCount,
+        _stencilBits
       );
 
       if (skSurface == null) {

lib/web_ui/lib/src/engine/dom.dart

@@ -624,6 +624,27 @@ extension DomCanvasElementExtension on DomCanvasElement {
 
   DomCanvasRenderingContext2D get context2D =>
       getContext('2d')! as DomCanvasRenderingContext2D;
+
+  WebGLContext getGlContext(int majorVersion) {
+    if (majorVersion == 1) {
+      return getContext('webgl')! as WebGLContext;
+    }
+    return getContext('webgl2')! as WebGLContext;
+  }
+}
+
+@JS()
+@staticInterop
+class WebGLContext {}
+
+extension WebGLContextExtension on WebGLContext {
+  external int getParameter(int value);
+
+  @JS('SAMPLES')
+  external int get samples;
+
+  @JS('STENCIL_BITS')
+  external int get stencilBits;
 }
 
 @JS()

lib/web_ui/test/canvaskit/canvaskit_api_test.dart

@@ -1778,4 +1778,33 @@ void _paragraphTests() {
       canvasKit.TextHeightBehavior.DisableAll,
     );
   });
+
+  test('MakeOnScreenGLSurface test', () {
+    final DomCanvasElement canvas = createDomCanvasElement(
+      width: 100,
+      height: 100,
+    );
+    final WebGLContext gl = canvas.getGlContext(webGLVersion);
+    final int sampleCount = gl.getParameter(gl.samples);
+    final int stencilBits = gl.getParameter(gl.stencilBits);
+
+    final int glContext = canvasKit.GetWebGLContext(
+      canvas,
+      SkWebGLContextOptions(
+        antialias: 0,
+        majorVersion: webGLVersion.toDouble(),
+      ),
+    ).toInt();
+    final SkGrContext grContext =  canvasKit.MakeGrContext(glContext);
+    final SkSurface? skSurface = canvasKit.MakeOnScreenGLSurface(
+      grContext,
+      100,
+      100,
+      SkColorSpaceSRGB,
+      sampleCount,
+      stencilBits
+    );
+
+    expect(skSurface, isNotNull);
+  }, skip: isFirefox); // Intended: Headless firefox has no webgl support https://github.com/flutter/flutter/issues/109265
 }