[web:canvaskit] switch to temporary SkPaint objects (#54818)

Do not eagerly create an `SkPaint` object that's strongly referenced by `CkPaint`. Instead, when a `Canvas.draw*` is called, create a temporary `SkPaint` object, pass it to Skia, then immediately delete it. This way there are no persistent `SkPaint` handles lurking in the system that transitively hold onto expensive native resources.

Addresses the `Paint` issue in flutter/flutter#153678 in CanvasKit

Spot checking some benchmarks. Here's the effect of this PR on `draw_rect_variable_paint`. It's a bit of a stress test as it creates 300K distinct `Paint` objects to render 600 pictures (a typical ratio does not normally exceed ten paints to one picture). Even so, the effect of creating an extra `SkPaint` on every `draw*` command does not look significant. However, removing a dependency on the GC for 300K objects looks like a good trade-off.

## Before

Allocation stats:

```
  Paint Created: 300000
  Paint Deleted: 300000
  Paint Leaked: 300000
  Picture Created: 600
  Picture Deleted: 599
  Picture Leaked: 599
```

Performance stats:

```
windowRenderDuration: (samples: 98 clean/2 outliers/100 measured/300 total)
 | average: 4679.551020408163 μs
 | outlier average: 5100 μs
 | outlier/clean ratio: 1.0898481452084188x
 | noise: 3.11%

sceneBuildDuration: (samples: 98 clean/2 outliers/100 measured/300 total)
 | average: 4689.765306122449 μs
 | outlier average: 5100 μs
 | outlier/clean ratio: 1.087474461321549x
 | noise: 3.19%

drawFrameDuration: (samples: 97 clean/3 outliers/100 measured/300 total)
 | average: 8447.474226804125 μs
 | outlier average: 9332.666666666666 μs
 | outlier/clean ratio: 1.1047878236850721x
 | noise: 3.52%
```

## After

Allocation stats:

```
  Picture Created: 600
  Picture Deleted: 599
  Picture Leaked: 599
```

Performance stats:

```
windowRenderDuration: (samples: 97 clean/3 outliers/100 measured/300 total)
 | average: 4780.40206185567 μs
 | outlier average: 5133.666666666667 μs
 | outlier/clean ratio: 1.0738985131877936x
 | noise: 2.70%

sceneBuildDuration: (samples: 97 clean/3 outliers/100 measured/300 total)
 | average: 4787.6082474226805 μs
 | outlier average: 5133.666666666667 μs
 | outlier/clean ratio: 1.0722821085936345x
 | noise: 2.72%

drawFrameDuration: (samples: 97 clean/3 outliers/100 measured/300 total)
 | average: 8243.309278350516 μs
 | outlier average: 9033.333333333334 μs
 | outlier/clean ratio: 1.0958382159768851x
 | noise: 2.60%
```

Author: yjbanov

lib/web_ui/lib/painting.dart

@@ -325,14 +325,6 @@ abstract class Paint {
   factory Paint() => engine.renderer.createPaint();
 
   factory Paint.from(Paint other) {
-    // This is less efficient than copying the underlying buffer or object but
-    // it's a reasonable default, as if a user wanted to implement a copy of a
-    // paint object themselves they are unable to do much better than this.
-    //
-    // TODO(matanlurey): Web team, if important to optimize, could:
-    // 1. Add a `engine.renderer.copyPaint` method.
-    // 2. Use the below code as the default implementation.
-    // 3. Have renderer-specific implementations override with optimized code.
     final Paint paint = Paint();
     paint
       ..blendMode = other.blendMode

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

@@ -80,13 +80,16 @@ class CkCanvas {
     CkPaint paint,
   ) {
     const double toDegrees = 180 / math.pi;
+
+    final skPaint = paint.toSkPaint();
     skCanvas.drawArc(
       toSkRect(oval),
       startAngle * toDegrees,
       sweepAngle * toDegrees,
       useCenter,
-      paint.skiaObject,
+      skPaint,
     );
+    skPaint.delete();
   }
 
   // TODO(flar): CanvasKit does not expose sampling options available on SkCanvas.drawAtlas
@@ -98,23 +101,27 @@ class CkCanvas {
     Uint32List? colors,
     ui.BlendMode blendMode,
   ) {
+    final skPaint = paint.toSkPaint();
     skCanvas.drawAtlas(
       atlas.skImage,
       rects,
       rstTransforms,
-      paint.skiaObject,
+      skPaint,
       toSkBlendMode(blendMode),
       colors,
     );
+    skPaint.delete();
   }
 
   void drawCircle(ui.Offset c, double radius, CkPaint paint) {
+    final skPaint = paint.toSkPaint();
     skCanvas.drawCircle(
       c.dx,
       c.dy,
       radius,
-      paint.skiaObject,
+      skPaint,
     );
+    skPaint.delete();
   }
 
   void drawColor(ui.Color color, ui.BlendMode blendMode) {
@@ -125,23 +132,26 @@ class CkCanvas {
   }
 
   void drawDRRect(ui.RRect outer, ui.RRect inner, CkPaint paint) {
+    final skPaint = paint.toSkPaint();
     skCanvas.drawDRRect(
       toSkRRect(outer),
       toSkRRect(inner),
-      paint.skiaObject,
+      skPaint,
     );
+    skPaint.delete();
   }
 
   void drawImage(CkImage image, ui.Offset offset, CkPaint paint) {
     final ui.FilterQuality filterQuality = paint.filterQuality;
+    final skPaint = paint.toSkPaint();
     if (filterQuality == ui.FilterQuality.high) {
       skCanvas.drawImageCubic(
         image.skImage,
         offset.dx,
         offset.dy,
         _kMitchellNetravali_B,
         _kMitchellNetravali_C,
-        paint.skiaObject,
+        skPaint,
       );
     } else {
       skCanvas.drawImageOptions(
@@ -150,21 +160,23 @@ class CkCanvas {
         offset.dy,
         toSkFilterMode(filterQuality),
         toSkMipmapMode(filterQuality),
-        paint.skiaObject,
+        skPaint,
       );
     }
+    skPaint.delete();
   }
 
   void drawImageRect(CkImage image, ui.Rect src, ui.Rect dst, CkPaint paint) {
     final ui.FilterQuality filterQuality = paint.filterQuality;
+    final skPaint = paint.toSkPaint();
     if (filterQuality == ui.FilterQuality.high) {
       skCanvas.drawImageRectCubic(
         image.skImage,
         toSkRect(src),
         toSkRect(dst),
         _kMitchellNetravali_B,
         _kMitchellNetravali_C,
-        paint.skiaObject,
+        skPaint,
       );
     } else {
       skCanvas.drawImageRectOptions(
@@ -173,41 +185,50 @@ class CkCanvas {
         toSkRect(dst),
         toSkFilterMode(filterQuality),
         toSkMipmapMode(filterQuality),
-        paint.skiaObject,
+        skPaint,
       );
     }
+    skPaint.delete();
   }
 
   void drawImageNine(
       CkImage image, ui.Rect center, ui.Rect dst, CkPaint paint) {
+    final skPaint = paint.toSkPaint();
     skCanvas.drawImageNine(
       image.skImage,
       toSkRect(center),
       toSkRect(dst),
       toSkFilterMode(paint.filterQuality),
-      paint.skiaObject,
+      skPaint,
     );
+    skPaint.delete();
   }
 
   void drawLine(ui.Offset p1, ui.Offset p2, CkPaint paint) {
+    final skPaint = paint.toSkPaint();
     skCanvas.drawLine(
       p1.dx,
       p1.dy,
       p2.dx,
       p2.dy,
-      paint.skiaObject,
+      skPaint,
     );
+    skPaint.delete();
   }
 
   void drawOval(ui.Rect rect, CkPaint paint) {
+    final skPaint = paint.toSkPaint();
     skCanvas.drawOval(
       toSkRect(rect),
-      paint.skiaObject,
+      skPaint,
     );
+    skPaint.delete();
   }
 
   void drawPaint(CkPaint paint) {
-    skCanvas.drawPaint(paint.skiaObject);
+    final skPaint = paint.toSkPaint();
+    skCanvas.drawPaint(skPaint);
+    skPaint.delete();
   }
 
   void drawParagraph(CkParagraph paragraph, ui.Offset offset) {
@@ -219,7 +240,9 @@ class CkCanvas {
   }
 
   void drawPath(CkPath path, CkPaint paint) {
-    skCanvas.drawPath(path.skiaObject, paint.skiaObject);
+    final skPaint = paint.toSkPaint();
+    skCanvas.drawPath(path.skiaObject, skPaint);
+    skPaint.delete();
   }
 
   void drawPicture(CkPicture picture) {
@@ -228,22 +251,28 @@ class CkCanvas {
   }
 
   void drawPoints(CkPaint paint, ui.PointMode pointMode, Float32List points) {
+    final skPaint = paint.toSkPaint();
     skCanvas.drawPoints(
       toSkPointMode(pointMode),
       points,
-      paint.skiaObject,
+      skPaint,
     );
+    skPaint.delete();
   }
 
   void drawRRect(ui.RRect rrect, CkPaint paint) {
+    final skPaint = paint.toSkPaint();
     skCanvas.drawRRect(
       toSkRRect(rrect),
-      paint.skiaObject,
+      skPaint,
     );
+    skPaint.delete();
   }
 
   void drawRect(ui.Rect rect, CkPaint paint) {
-    skCanvas.drawRect(toSkRect(rect), paint.skiaObject);
+    final skPaint = paint.toSkPaint();
+    skCanvas.drawRect(toSkRect(rect), skPaint);
+    skPaint.delete();
   }
 
   void drawShadow(
@@ -254,11 +283,13 @@ class CkCanvas {
 
   void drawVertices(
       CkVertices vertices, ui.BlendMode blendMode, CkPaint paint) {
+    final skPaint = paint.toSkPaint();
     skCanvas.drawVertices(
       vertices.skiaObject,
       toSkBlendMode(blendMode),
-      paint.skiaObject,
+      skPaint,
     );
+    skPaint.delete();
   }
 
   void restore() {
@@ -278,16 +309,20 @@ class CkCanvas {
   }
 
   void saveLayer(ui.Rect bounds, CkPaint? paint) {
+    final skPaint = paint?.toSkPaint();
     skCanvas.saveLayer(
-      paint?.skiaObject,
+      skPaint,
       toSkRect(bounds),
       null,
       null,
     );
+    skPaint?.delete();
   }
 
   void saveLayerWithoutBounds(CkPaint? paint) {
-    skCanvas.saveLayer(paint?.skiaObject, null, null, null);
+    final skPaint = paint?.toSkPaint();
+    skCanvas.saveLayer(skPaint, null, null, null);
+    skPaint?.delete();
   }
 
   void saveLayerWithFilter(ui.Rect bounds, ui.ImageFilter filter,
@@ -298,13 +333,15 @@ class CkCanvas {
     } else {
       convertible = filter as CkManagedSkImageFilterConvertible;
     }
-    convertible.imageFilter((SkImageFilter filter) {
+    convertible.withSkImageFilter((SkImageFilter filter) {
+      final skPaint = paint?.toSkPaint();
       skCanvas.saveLayer(
-        paint?.skiaObject,
+        skPaint,
         toSkRect(bounds),
         filter,
         0,
       );
+      skPaint?.delete();
     });
   }
 

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

@@ -1516,6 +1516,9 @@ class SkImageFilter {}
 extension SkImageFilterExtension on SkImageFilter {
   external JSVoid delete();
 
+  @JS('isDeleted')
+  external JSBoolean _isDeleted();
+  bool isDeleted() => _isDeleted().toDart;
 
   @JS('getOutputBounds')
   external JSInt32Array _getOutputBounds(JSFloat32Array bounds);

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

@@ -71,7 +71,7 @@ abstract class CkColorFilter implements CkManagedSkImageFilterConvertible {
   SkColorFilter _initRawColorFilter();
 
   @override
-  void imageFilter(SkImageFilterBorrow borrow) {
+  void withSkImageFilter(SkImageFilterBorrow borrow) {
     // Since ColorFilter has a const constructor it cannot store dynamically
     // created Skia objects. Therefore a new SkImageFilter is created every time
     // it's used. However, once used it's no longer needed, so it's deleted

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

@@ -300,7 +300,6 @@ CkImage scaleImage(SkImage image, int? targetWidth, int? targetHeight) {
     ui.Rect.fromLTWH(0, 0, targetWidth!.toDouble(), targetHeight!.toDouble()),
     paint,
   );
-  paint.dispose();
 
   final CkPicture picture = recorder.endRecording();
   final ui.Image finalImage = picture.toImageSync(targetWidth, targetHeight);