flutter · harryterkelsen · Aug 1, 2023 · Jun 30, 2023 · Jun 30, 2023 · Jul 7, 2023
diff --git a/lib/web_ui/lib/src/engine/canvaskit/canvaskit_api.dart b/lib/web_ui/lib/src/engine/canvaskit/canvaskit_api.dart
@@ -2195,8 +2195,10 @@ class SkPictureRecorder {
 
 extension SkPictureRecorderExtension on SkPictureRecorder {
   @JS('beginRecording')
-  external SkCanvas _beginRecording(JSFloat32Array bounds);
-  SkCanvas beginRecording(Float32List bounds) => _beginRecording(bounds.toJS);
+  external SkCanvas _beginRecording(
+      JSFloat32Array bounds, JSBoolean computeBounds);
+  SkCanvas beginRecording(Float32List bounds) =>
+      _beginRecording(bounds.toJS, true.toJS);
 
   external SkPicture finishRecordingAsPicture();
   external JSVoid delete();
@@ -2594,6 +2596,14 @@ class SkPicture {}
 
 extension SkPictureExtension on SkPicture {
   external JSVoid delete();
+
+  @JS('cullRect')
+  external JSFloat32Array _cullRect();
+  Float32List cullRect() => _cullRect().toDart;
+
+  @JS('approximateBytesUsed')
+  external JSNumber _approximateBytesUsed();
+  int approximateBytesUsed() => _approximateBytesUsed().toDartInt;
 }
 
 @JS()
@@ -3544,11 +3554,13 @@ List<String> getCanvasKitJsFileNames(CanvasKitVariant variant) {
       return <String>[_kChromiumCanvasKitJsFileName];
   }
 }
+
 Iterable<String> get _canvasKitJsUrls {
   return getCanvasKitJsFileNames(configuration.canvasKitVariant).map(
     (String filename) => '$_canvasKitBaseUrl$filename',
   );
 }
+
 @visibleForTesting
 String canvasKitWasmModuleUrl(String file, String canvasKitBase) =>
     canvasKitBase + file;
@@ -3609,6 +3621,7 @@ Future<bool> _downloadCanvasKitJs(String url) {
     canvasKitScript.remove();
     canvasKitLoadCompleter.complete(true);
   }
+
   void errorEventHandler(DomEvent errorEvent) {
     canvasKitScript.remove();
     canvasKitLoadCompleter.complete(false);

diff --git a/lib/web_ui/lib/src/engine/canvaskit/embedded_views.dart b/lib/web_ui/lib/src/engine/canvaskit/embedded_views.dart
@@ -16,6 +16,7 @@ import '../window.dart';
 import 'canvas.dart';
 import 'embedded_views_diff.dart';
 import 'path.dart';
+import 'picture.dart';
 import 'picture_recorder.dart';
 import 'renderer.dart';
 import 'surface.dart';
@@ -139,7 +140,6 @@ class HtmlViewEmbedder {
     if (needNewOverlay && hasAvailableOverlay) {
       final CkPictureRecorder pictureRecorder = CkPictureRecorder();
       pictureRecorder.beginRecording(ui.Offset.zero & _frameSize);
-      pictureRecorder.recordingCanvas!.clear(const ui.Color(0x00000000));
       _context.pictureRecordersCreatedDuringPreroll.add(pictureRecorder);
     }
 
@@ -422,9 +422,10 @@ class HtmlViewEmbedder {
       if (_overlays[viewId] != null) {
         final SurfaceFrame frame = _overlays[viewId]!.acquireFrame(_frameSize);
         final CkCanvas canvas = frame.skiaCanvas;
-        canvas.drawPicture(
-          _context.pictureRecorders[pictureRecorderIndex].endRecording(),
-        );
+        final CkPicture ckPicture =
+            _context.pictureRecorders[pictureRecorderIndex].endRecording();
+        canvas.clear(const ui.Color(0x00000000));
+        canvas.drawPicture(ckPicture);
         pictureRecorderIndex++;
         frame.submit();
       }

diff --git a/lib/web_ui/lib/src/engine/canvaskit/layer.dart b/lib/web_ui/lib/src/engine/canvaskit/layer.dart
@@ -466,7 +466,7 @@ class PictureLayer extends Layer {
 
   @override
   void preroll(PrerollContext prerollContext, Matrix4 matrix) {
-    paintBounds = picture.cullRect!.shift(offset);
+    paintBounds = picture.cullRect().shift(offset);
   }
 
   @override

diff --git a/lib/web_ui/lib/src/engine/canvaskit/layer_tree.dart b/lib/web_ui/lib/src/engine/canvaskit/layer_tree.dart
@@ -51,8 +51,6 @@ class LayerTree {
     final Iterable<CkCanvas> overlayCanvases =
         frame.viewEmbedder!.getOverlayCanvases();
     overlayCanvases.forEach(internalNodesCanvas.addCanvas);
-    // Clear the canvases before painting
-    internalNodesCanvas.clear(const ui.Color(0x00000000));
     final PaintContext context = PaintContext(
       internalNodesCanvas,
       frame.canvas,

diff --git a/lib/web_ui/lib/src/engine/canvaskit/picture.dart b/lib/web_ui/lib/src/engine/canvaskit/picture.dart
@@ -15,17 +15,18 @@ import 'surface_factory.dart';
 
 /// Implements [ui.Picture] on top of [SkPicture].
 class CkPicture implements ui.Picture {
-  CkPicture(SkPicture skPicture, this.cullRect) {
+  CkPicture(SkPicture skPicture) {
     _ref = UniqueRef<SkPicture>(this, skPicture, 'Picture');
   }
 
   late final UniqueRef<SkPicture> _ref;
-  final ui.Rect? cullRect;
 
   SkPicture get skiaObject => _ref.nativeObject;
 
+  ui.Rect cullRect() => fromSkRect(skiaObject.cullRect());
+
   @override
-  int get approximateBytesUsed => 0;
+  int get approximateBytesUsed => skiaObject.approximateBytesUsed();
 
   @override
   bool get debugDisposed {

diff --git a/lib/web_ui/lib/src/engine/canvaskit/picture_recorder.dart b/lib/web_ui/lib/src/engine/canvaskit/picture_recorder.dart
@@ -11,12 +11,10 @@ import 'canvaskit_api.dart';
 import 'picture.dart';
 
 class CkPictureRecorder implements ui.PictureRecorder {
-  ui.Rect? _cullRect;
   SkPictureRecorder? _skRecorder;
   CkCanvas? _recordingCanvas;
 
   CkCanvas beginRecording(ui.Rect bounds) {
-    _cullRect = bounds;
     final SkPictureRecorder recorder = _skRecorder = SkPictureRecorder();
     final Float32List skRect = toSkRect(bounds);
     final SkCanvas skCanvas = recorder.beginRecording(skRect);
@@ -36,7 +34,7 @@ class CkPictureRecorder implements ui.PictureRecorder {
     final SkPicture skPicture = recorder.finishRecordingAsPicture();
     recorder.delete();
     _skRecorder = null;
-    final CkPicture result = CkPicture(skPicture, _cullRect);
+    final CkPicture result = CkPicture(skPicture);
     // We invoke the handler here, not in the picture constructor, because we want
     // [result.approximateBytesUsed] to be available for the handler.
     ui.Picture.onCreate?.call(result);

diff --git a/lib/web_ui/lib/src/engine/canvaskit/rasterizer.dart b/lib/web_ui/lib/src/engine/canvaskit/rasterizer.dart
@@ -33,6 +33,7 @@ class Rasterizer {
           SurfaceFactory.instance.baseSurface.acquireFrame(layerTree.frameSize);
       HtmlViewEmbedder.instance.frameSize = layerTree.frameSize;
       final CkCanvas canvas = frame.skiaCanvas;
+      canvas.clear(const ui.Color(0x00000000));
       final Frame compositorFrame =
           context.acquireFrame(canvas, HtmlViewEmbedder.instance);