JS-interop clean-up (#19850)

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

@@ -16,7 +16,7 @@ class CkCanvas {
     skCanvas.clear(toSharedSkColor1(color));
   }
 
-  static final SkClipOp _clipOpIntersect = canvasKitJs.ClipOp.Intersect;
+  static final SkClipOp _clipOpIntersect = canvasKit.ClipOp.Intersect;
 
   void clipPath(ui.Path path, bool doAntiAlias) {
     final CkPath ckPath = path as CkPath;
@@ -158,7 +158,7 @@ class CkCanvas {
 
   void drawParagraph(CkParagraph paragraph, ui.Offset offset) {
     skCanvas.drawParagraph(
-      _jsObjectWrapper.unwrapSkParagraph(paragraph.legacySkiaObject),
+      paragraph.skiaObject,
       offset.dx,
       offset.dy,
     );
@@ -232,12 +232,12 @@ class CkCanvas {
   }
 
   void saveLayerWithoutBounds(CkPaint paint) {
-    final SkCanvasSaveLayerWithoutBoundsOverride override = _jsObjectWrapper.castToSkCanvasSaveLayerWithoutBoundsOverride(skCanvas);
+    final SkCanvasSaveLayerWithoutBoundsOverload override = skCanvas as SkCanvasSaveLayerWithoutBoundsOverload;
     override.saveLayer(paint.skiaObject);
   }
 
   void saveLayerWithFilter(ui.Rect bounds, ui.ImageFilter filter) {
-    final SkCanvasSaveLayerWithFilterOverride override = _jsObjectWrapper.castToSkCanvasSaveLayerWithFilterOverride(skCanvas);
+    final SkCanvasSaveLayerWithFilterOverload override = skCanvas as SkCanvasSaveLayerWithFilterOverload;
     final CkImageFilter skImageFilter = filter as CkImageFilter;
     return override.saveLayer(
       null,

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

@@ -8,162 +8,15 @@
 /// the API behind these bindings in the Skia source code.
 part of engine;
 
-final js.JsObject _jsWindow = js.JsObject.fromBrowserObject(html.window);
+/// Entrypoint into the CanvasKit API.
+late CanvasKit canvasKit;
 
-/// This and [_jsObjectWrapper] below are used to convert `@JS`-backed
-/// objects to [js.JsObject]s. To do that we use `@JS` to pass the object
-/// to JavaScript (see [JsObjectWrapper]), then use this variable (which
-/// uses `dart:js`) to read the value back, causing it to be wrapped in
-/// [js.JsObject].
+/// Sets the [CanvasKit] object on `window` so we can use `@JS()` to bind to
+/// static APIs.
 ///
-// TODO(yjbanov): this is a temporary hack until we fully migrate to @JS.
-final js.JsObject _jsObjectWrapperLegacy = js.JsObject(js.context['Object']);
-
-@JS('window.flutter_js_object_wrapper')
-external JsObjectWrapper get _jsObjectWrapper;
-
-@visibleForTesting
-JsObjectWrapper get debugJsObjectWrapper => _jsObjectWrapper;
-
-void initializeCanvasKitBindings(js.JsObject canvasKit) {
-  // Because JsObject cannot be cast to a @JS type, we stash CanvasKit into
-  // a global and use the [canvasKitJs] getter to access it.
-  _jsWindow['flutter_canvas_kit'] = canvasKit;
-  _jsWindow['flutter_js_object_wrapper'] = _jsObjectWrapperLegacy;
-}
-
-@JS()
-class JsObjectWrapper {
-  external set skPaint(SkPaint? paint);
-  external set skMaskFilter(SkMaskFilter? filter);
-  external set skColorFilter(SkColorFilter? filter);
-  external set skImageFilter(SkImageFilter? filter);
-  external set skPath(SkPath? path);
-  external set skImage(SkImage? image);
-  external SkCanvas? get skCanvas;
-  external set skCanvas(SkCanvas? canvas);
-  external SkPicture? get skPicture;
-  external set skPicture(SkPicture? picture);
-  external SkParagraph? get skParagraph;
-  external set skParagraph(SkParagraph? paragraph);
-}
-
-/// Reads [JsObjectWrapper.skPath] as [SkPathArcToPointOverload].
-@JS('window.flutter_js_object_wrapper.skPath')
-external SkPathArcToPointOverload get _skPathArcToPointOverload;
-
-/// Reads [JsObjectWrapper.skCanvas] as [SkCanvasSaveLayerWithoutBoundsOverride].
-@JS('window.flutter_js_object_wrapper.skCanvas')
-external SkCanvasSaveLayerWithoutBoundsOverride get _skCanvasSaveLayerWithoutBoundsOverride;
-
-/// Reads [JsObjectWrapper.skCanvas] as [SkCanvasSaveLayerWithFilterOverride].
-@JS('window.flutter_js_object_wrapper.skCanvas')
-external SkCanvasSaveLayerWithFilterOverride get _skCanvasSaveLayerWithFilterOverride;
-
-/// Specific methods that wrap `@JS`-backed objects into a [js.JsObject]
-/// for use with legacy `dart:js` API.
-extension JsObjectWrappers on JsObjectWrapper {
-  js.JsObject wrapSkPaint(SkPaint paint) {
-    _jsObjectWrapper.skPaint = paint;
-    js.JsObject wrapped = _jsObjectWrapperLegacy['skPaint'];
-    _jsObjectWrapper.skPaint = null;
-    return wrapped;
-  }
-
-  js.JsObject wrapSkMaskFilter(SkMaskFilter filter) {
-    _jsObjectWrapper.skMaskFilter = filter;
-    js.JsObject wrapped = _jsObjectWrapperLegacy['skMaskFilter'];
-    _jsObjectWrapper.skMaskFilter = null;
-    return wrapped;
-  }
-
-  js.JsObject wrapSkColorFilter(SkColorFilter filter) {
-    _jsObjectWrapper.skColorFilter = filter;
-    js.JsObject wrapped = _jsObjectWrapperLegacy['skColorFilter'];
-    _jsObjectWrapper.skColorFilter = null;
-    return wrapped;
-  }
-
-  js.JsObject wrapSkImageFilter(SkImageFilter filter) {
-    _jsObjectWrapper.skImageFilter = filter;
-    js.JsObject wrapped = _jsObjectWrapperLegacy['skImageFilter'];
-    _jsObjectWrapper.skImageFilter = null;
-    return wrapped;
-  }
-
-  js.JsObject wrapSkPath(SkPath path) {
-    _jsObjectWrapper.skPath = path;
-    js.JsObject wrapped = _jsObjectWrapperLegacy['skPath'];
-    _jsObjectWrapper.skPath = null;
-    return wrapped;
-  }
-
-  js.JsObject wrapSkImage(SkImage image) {
-    _jsObjectWrapper.skImage = image;
-    js.JsObject wrapped = _jsObjectWrapperLegacy['skImage'];
-    _jsObjectWrapper.skImage = null;
-    return wrapped;
-  }
-
-  js.JsObject wrapSkPicture(SkPicture picture) {
-    _jsObjectWrapper.skPicture = picture;
-    js.JsObject wrapped = _jsObjectWrapperLegacy['skPicture'];
-    _jsObjectWrapper.skPicture = null;
-    return wrapped;
-  }
-
-  SkPicture unwrapSkPicture(js.JsObject wrapped) {
-    _jsObjectWrapperLegacy['skPicture'] = wrapped;
-    final SkPicture unwrapped = _jsObjectWrapper.skPicture!;
-    _jsObjectWrapper.skPicture = null;
-    return unwrapped;
-  }
-
-  js.JsObject wrapSkParagraph(SkParagraph paragraph) {
-    _jsObjectWrapper.skParagraph = paragraph;
-    js.JsObject wrapped = _jsObjectWrapperLegacy['skParagraph'];
-    _jsObjectWrapper.skParagraph = null;
-    return wrapped;
-  }
-
-  SkParagraph unwrapSkParagraph(js.JsObject wrapped) {
-    _jsObjectWrapperLegacy['skParagraph'] = wrapped;
-    final SkParagraph unwrapped = _jsObjectWrapper.skParagraph!;
-    _jsObjectWrapper.skParagraph = null;
-    return unwrapped;
-  }
-
-  SkCanvas unwrapSkCanvas(js.JsObject wrapped) {
-    _jsObjectWrapperLegacy['skCanvas'] = wrapped;
-    final SkCanvas unwrapped = _jsObjectWrapper.skCanvas!;
-    _jsObjectWrapper.skCanvas = null;
-    return unwrapped;
-  }
-
-  SkPathArcToPointOverload castToSkPathArcToPointOverload(SkPath path) {
-    _jsObjectWrapper.skPath = path;
-    final SkPathArcToPointOverload overload = _skPathArcToPointOverload;
-    _jsObjectWrapper.skPath = null;
-    return overload;
-  }
-
-  SkCanvasSaveLayerWithoutBoundsOverride castToSkCanvasSaveLayerWithoutBoundsOverride(SkCanvas canvas) {
-    _jsObjectWrapper.skCanvas = canvas;
-    final SkCanvasSaveLayerWithoutBoundsOverride overload = _skCanvasSaveLayerWithoutBoundsOverride;
-    _jsObjectWrapper.skCanvas = null;
-    return overload;
-  }
-
-  SkCanvasSaveLayerWithFilterOverride castToSkCanvasSaveLayerWithFilterOverride(SkCanvas canvas) {
-    _jsObjectWrapper.skCanvas = canvas;
-    final SkCanvasSaveLayerWithFilterOverride overload = _skCanvasSaveLayerWithFilterOverride;
-    _jsObjectWrapper.skCanvas = null;
-    return overload;
-  }
-}
-
+/// See, e.g. [SkPaint].
 @JS('window.flutter_canvas_kit')
-external CanvasKit get canvasKitJs;
+external set windowFlutterCanvasKit(CanvasKit value);
 
 @JS()
 class CanvasKit {
@@ -213,6 +66,66 @@ class CanvasKit {
   // End of text decoration enum.
 
   external SkFontMgrNamespace get SkFontMgr;
+  external int GetWebGLContext(html.CanvasElement canvas, SkWebGLContextOptions options);
+  external SkGrContext MakeGrContext(int glContext);
+  external SkSurface MakeOnScreenGLSurface(
+    SkGrContext grContext,
+    double width,
+    double height,
+    SkColorSpace colorSpace,
+  );
+  external SkSurface MakeSWCanvasSurface(html.CanvasElement canvas);
+  external void setCurrentContext(int glContext);
+}
+
+@JS('window.CanvasKitInit')
+external CanvasKitInitPromise CanvasKitInit(CanvasKitInitOptions options);
+
+typedef LocateFileCallback = String Function(String file, String unusedBase);
+
+@JS()
+@anonymous
+class CanvasKitInitOptions {
+  external factory CanvasKitInitOptions({
+    required LocateFileCallback locateFile,
+  });
+}
+
+typedef CanvasKitInitCallback = void Function(CanvasKit canvasKit);
+
+@JS()
+class CanvasKitInitPromise {
+  external void then(CanvasKitInitCallback callback);
+}
+
+@JS('window.flutter_canvas_kit.SkColorSpace.SRGB')
+external SkColorSpace get SkColorSpaceSRGB;
+
+@JS()
+class SkColorSpace {}
+
+@JS()
+@anonymous
+class SkWebGLContextOptions {
+  external factory SkWebGLContextOptions({
+    required int anitalias,
+  });
+}
+
+@JS()
+class SkSurface {
+  external SkCanvas getCanvas();
+  external void flush();
+  external int width();
+  external int height();
+  external void dispose();
+}
+
+@JS()
+class SkGrContext {
+  external void setResourceCacheLimitBytes(int limit);
+  external void releaseResourcesAndAbandonContext();
+  external void delete();
 }
 
 @JS()
@@ -227,8 +140,8 @@ class SkFontSlant {
 }
 
 final List<SkFontSlant> _skFontSlants = <SkFontSlant>[
-  canvasKitJs.FontSlant.Upright,
-  canvasKitJs.FontSlant.Italic,
+  canvasKit.FontSlant.Upright,
+  canvasKit.FontSlant.Italic,
 ];
 
 SkFontSlant toSkFontSlant(ui.FontStyle style) {
@@ -254,15 +167,15 @@ class SkFontWeight {
 }
 
 final List<SkFontWeight> _skFontWeights = <SkFontWeight>[
-  canvasKitJs.FontWeight.Thin,
-  canvasKitJs.FontWeight.ExtraLight,
-  canvasKitJs.FontWeight.Light,
-  canvasKitJs.FontWeight.Normal,
-  canvasKitJs.FontWeight.Medium,
-  canvasKitJs.FontWeight.SemiBold,
-  canvasKitJs.FontWeight.Bold,
-  canvasKitJs.FontWeight.ExtraBold,
-  canvasKitJs.FontWeight.ExtraBlack,
+  canvasKit.FontWeight.Thin,
+  canvasKit.FontWeight.ExtraLight,
+  canvasKit.FontWeight.Light,
+  canvasKit.FontWeight.Normal,
+  canvasKit.FontWeight.Medium,
+  canvasKit.FontWeight.SemiBold,
+  canvasKit.FontWeight.Bold,
+  canvasKit.FontWeight.ExtraBold,
+  canvasKit.FontWeight.ExtraBlack,
 ];
 
 SkFontWeight toSkFontWeight(ui.FontWeight weight) {
@@ -281,8 +194,8 @@ class SkAffinity {
 }
 
 final List<SkAffinity> _skAffinitys = <SkAffinity>[
-  canvasKitJs.Affinity.Upstream,
-  canvasKitJs.Affinity.Downstream,
+  canvasKit.Affinity.Upstream,
+  canvasKit.Affinity.Downstream,
 ];
 
 SkAffinity toSkAffinity(ui.TextAffinity affinity) {
@@ -303,8 +216,8 @@ class SkTextDirection {
 // Flutter enumerates text directions as RTL, LTR, while CanvasKit
 // enumerates them LTR, RTL.
 final List<SkTextDirection> _skTextDirections = <SkTextDirection>[
-  canvasKitJs.TextDirection.RTL,
-  canvasKitJs.TextDirection.LTR,
+  canvasKit.TextDirection.RTL,
+  canvasKit.TextDirection.LTR,
 ];
 
 SkTextDirection toSkTextDirection(ui.TextDirection direction) {
@@ -327,12 +240,12 @@ class SkTextAlign {
 }
 
 final List<SkTextAlign> _skTextAligns = <SkTextAlign>[
-  canvasKitJs.TextAlign.Left,
-  canvasKitJs.TextAlign.Right,
-  canvasKitJs.TextAlign.Center,
-  canvasKitJs.TextAlign.Justify,
-  canvasKitJs.TextAlign.Start,
-  canvasKitJs.TextAlign.End,
+  canvasKit.TextAlign.Left,
+  canvasKit.TextAlign.Right,
+  canvasKit.TextAlign.Center,
+  canvasKit.TextAlign.Justify,
+  canvasKit.TextAlign.Start,
+  canvasKit.TextAlign.End,
 ];
 
 SkTextAlign toSkTextAlign(ui.TextAlign align) {
@@ -352,8 +265,8 @@ class SkRectHeightStyle {
 }
 
 final List<SkRectHeightStyle> _skRectHeightStyles = <SkRectHeightStyle>[
-  canvasKitJs.RectHeightStyle.Tight,
-  canvasKitJs.RectHeightStyle.Max,
+  canvasKit.RectHeightStyle.Tight,
+  canvasKit.RectHeightStyle.Max,
 ];
 
 SkRectHeightStyle toSkRectHeightStyle(ui.BoxHeightStyle style) {
@@ -373,8 +286,8 @@ class SkRectWidthStyle {
 }
 
 final List<SkRectWidthStyle> _skRectWidthStyles = <SkRectWidthStyle>[
-  canvasKitJs.RectWidthStyle.Tight,
-  canvasKitJs.RectWidthStyle.Max,
+  canvasKit.RectWidthStyle.Tight,
+  canvasKit.RectWidthStyle.Max,
 ];
 
 SkRectWidthStyle toSkRectWidthStyle(ui.BoxWidthStyle style) {
@@ -395,9 +308,9 @@ class SkVertexMode {
 }
 
 final List<SkVertexMode> _skVertexModes = <SkVertexMode>[
-  canvasKitJs.VertexMode.Triangles,
-  canvasKitJs.VertexMode.TrianglesStrip,
-  canvasKitJs.VertexMode.TriangleFan,
+  canvasKit.VertexMode.Triangles,
+  canvasKit.VertexMode.TrianglesStrip,
+  canvasKit.VertexMode.TriangleFan,
 ];
 
 SkVertexMode toSkVertexMode(ui.VertexMode mode) {
@@ -417,9 +330,9 @@ class SkPointMode {
 }
 
 final List<SkPointMode> _skPointModes = <SkPointMode>[
-  canvasKitJs.PointMode.Points,
-  canvasKitJs.PointMode.Lines,
-  canvasKitJs.PointMode.Polygon,
+  canvasKit.PointMode.Points,
+  canvasKit.PointMode.Lines,
+  canvasKit.PointMode.Polygon,
 ];
 
 SkPointMode toSkPointMode(ui.PointMode mode) {
@@ -438,8 +351,8 @@ class SkClipOp {
 }
 
 final List<SkClipOp> _skClipOps = <SkClipOp>[
-  canvasKitJs.ClipOp.Difference,
-  canvasKitJs.ClipOp.Intersect,
+  canvasKit.ClipOp.Difference,
+  canvasKit.ClipOp.Intersect,
 ];
 
 SkClipOp toSkClipOp(ui.ClipOp clipOp) {
@@ -458,8 +371,8 @@ class SkFillType {
 }
 
 final List<SkFillType> _skFillTypes = <SkFillType>[
-  canvasKitJs.FillType.Winding,
-  canvasKitJs.FillType.EvenOdd,
+  canvasKit.FillType.Winding,
+  canvasKit.FillType.EvenOdd,
 ];
 
 SkFillType toSkFillType(ui.PathFillType fillType) {
@@ -481,11 +394,11 @@ class SkPathOp {
 }
 
 final List<SkPathOp> _skPathOps = <SkPathOp>[
-  canvasKitJs.PathOp.Difference,
-  canvasKitJs.PathOp.Intersect,
-  canvasKitJs.PathOp.Union,
-  canvasKitJs.PathOp.XOR,
-  canvasKitJs.PathOp.ReverseDifference,
+  canvasKit.PathOp.Difference,
+  canvasKit.PathOp.Intersect,
+  canvasKit.PathOp.Union,
+  canvasKit.PathOp.XOR,
+  canvasKit.PathOp.ReverseDifference,
 ];
 
 SkPathOp toSkPathOp(ui.PathOperation pathOp) {
@@ -506,10 +419,10 @@ class SkBlurStyle {
 }
 
 final List<SkBlurStyle> _skBlurStyles = <SkBlurStyle>[
-  canvasKitJs.BlurStyle.Normal,
-  canvasKitJs.BlurStyle.Solid,
-  canvasKitJs.BlurStyle.Outer,
-  canvasKitJs.BlurStyle.Inner,
+  canvasKit.BlurStyle.Normal,
+  canvasKit.BlurStyle.Solid,
+  canvasKit.BlurStyle.Outer,
+  canvasKit.BlurStyle.Inner,
 ];
 
 SkBlurStyle toSkBlurStyle(ui.BlurStyle style) {
@@ -529,9 +442,9 @@ class SkStrokeCap {
 }
 
 final List<SkStrokeCap> _skStrokeCaps = <SkStrokeCap>[
-  canvasKitJs.StrokeCap.Butt,
-  canvasKitJs.StrokeCap.Round,
-  canvasKitJs.StrokeCap.Square,
+  canvasKit.StrokeCap.Butt,
+  canvasKit.StrokeCap.Round,
+  canvasKit.StrokeCap.Square,
 ];
 
 SkStrokeCap toSkStrokeCap(ui.StrokeCap strokeCap) {
@@ -550,8 +463,8 @@ class SkPaintStyle {
 }
 
 final List<SkPaintStyle> _skPaintStyles = <SkPaintStyle>[
-  canvasKitJs.PaintStyle.Fill,
-  canvasKitJs.PaintStyle.Stroke,
+  canvasKit.PaintStyle.Fill,
+  canvasKit.PaintStyle.Stroke,
 ];
 
 SkPaintStyle toSkPaintStyle(ui.PaintingStyle paintStyle) {
@@ -597,35 +510,35 @@ class SkBlendMode {
 }
 
 final List<SkBlendMode> _skBlendModes = <SkBlendMode>[
-  canvasKitJs.BlendMode.Clear,
-  canvasKitJs.BlendMode.Src,
-  canvasKitJs.BlendMode.Dst,
-  canvasKitJs.BlendMode.SrcOver,
-  canvasKitJs.BlendMode.DstOver,
-  canvasKitJs.BlendMode.SrcIn,
-  canvasKitJs.BlendMode.DstIn,
-  canvasKitJs.BlendMode.SrcOut,
-  canvasKitJs.BlendMode.DstOut,
-  canvasKitJs.BlendMode.SrcATop,
-  canvasKitJs.BlendMode.DstATop,
-  canvasKitJs.BlendMode.Xor,
-  canvasKitJs.BlendMode.Plus,
-  canvasKitJs.BlendMode.Modulate,
-  canvasKitJs.BlendMode.Screen,
-  canvasKitJs.BlendMode.Overlay,
-  canvasKitJs.BlendMode.Darken,
-  canvasKitJs.BlendMode.Lighten,
-  canvasKitJs.BlendMode.ColorDodge,
-  canvasKitJs.BlendMode.ColorBurn,
-  canvasKitJs.BlendMode.HardLight,
-  canvasKitJs.BlendMode.SoftLight,
-  canvasKitJs.BlendMode.Difference,
-  canvasKitJs.BlendMode.Exclusion,
-  canvasKitJs.BlendMode.Multiply,
-  canvasKitJs.BlendMode.Hue,
-  canvasKitJs.BlendMode.Saturation,
-  canvasKitJs.BlendMode.Color,
-  canvasKitJs.BlendMode.Luminosity,
+  canvasKit.BlendMode.Clear,
+  canvasKit.BlendMode.Src,
+  canvasKit.BlendMode.Dst,
+  canvasKit.BlendMode.SrcOver,
+  canvasKit.BlendMode.DstOver,
+  canvasKit.BlendMode.SrcIn,
+  canvasKit.BlendMode.DstIn,
+  canvasKit.BlendMode.SrcOut,
+  canvasKit.BlendMode.DstOut,
+  canvasKit.BlendMode.SrcATop,
+  canvasKit.BlendMode.DstATop,
+  canvasKit.BlendMode.Xor,
+  canvasKit.BlendMode.Plus,
+  canvasKit.BlendMode.Modulate,
+  canvasKit.BlendMode.Screen,
+  canvasKit.BlendMode.Overlay,
+  canvasKit.BlendMode.Darken,
+  canvasKit.BlendMode.Lighten,
+  canvasKit.BlendMode.ColorDodge,
+  canvasKit.BlendMode.ColorBurn,
+  canvasKit.BlendMode.HardLight,
+  canvasKit.BlendMode.SoftLight,
+  canvasKit.BlendMode.Difference,
+  canvasKit.BlendMode.Exclusion,
+  canvasKit.BlendMode.Multiply,
+  canvasKit.BlendMode.Hue,
+  canvasKit.BlendMode.Saturation,
+  canvasKit.BlendMode.Color,
+  canvasKit.BlendMode.Luminosity,
 ];
 
 SkBlendMode toSkBlendMode(ui.BlendMode blendMode) {
@@ -645,9 +558,9 @@ class SkStrokeJoin {
 }
 
 final List<SkStrokeJoin> _skStrokeJoins = <SkStrokeJoin>[
-  canvasKitJs.StrokeJoin.Miter,
-  canvasKitJs.StrokeJoin.Round,
-  canvasKitJs.StrokeJoin.Bevel,
+  canvasKit.StrokeJoin.Miter,
+  canvasKit.StrokeJoin.Round,
+  canvasKit.StrokeJoin.Bevel,
 ];
 
 SkStrokeJoin toSkStrokeJoin(ui.StrokeJoin strokeJoin) {
@@ -669,10 +582,10 @@ class SkFilterQuality {
 }
 
 final List<SkFilterQuality> _skFilterQualitys = <SkFilterQuality>[
-  canvasKitJs.FilterQuality.None,
-  canvasKitJs.FilterQuality.Low,
-  canvasKitJs.FilterQuality.Medium,
-  canvasKitJs.FilterQuality.High,
+  canvasKit.FilterQuality.None,
+  canvasKit.FilterQuality.Low,
+  canvasKit.FilterQuality.Medium,
+  canvasKit.FilterQuality.High,
 ];
 
 SkFilterQuality toSkFilterQuality(ui.FilterQuality filterQuality) {
@@ -693,9 +606,9 @@ class SkTileMode {
 }
 
 final List<SkTileMode> _skTileModes = <SkTileMode>[
-  canvasKitJs.TileMode.Clamp,
-  canvasKitJs.TileMode.Repeat,
-  canvasKitJs.TileMode.Mirror,
+  canvasKit.TileMode.Clamp,
+  canvasKit.TileMode.Repeat,
+  canvasKit.TileMode.Mirror,
 ];
 
 SkTileMode toSkTileMode(ui.TileMode mode) {
@@ -829,6 +742,13 @@ class SkImageFilter {
   external void delete();
 }
 
+// Mappings from SkMatrix-index to input-index.
+const List<int> _skMatrixIndexToMatrix4Index = <int>[
+  0, 4, 12, // Row 1
+  1, 5, 13, // Row 2
+  3, 7, 15, // Row 3
+];
+
 /// Converts a 4x4 Flutter matrix (represented as a [Float32List]) to an
 /// SkMatrix, which is a 3x3 transform matrix.
 Float32List toSkMatrixFromFloat32(Float32List matrix4) {
@@ -1445,12 +1365,12 @@ class SkCanvas {
 }
 
 @JS()
-class SkCanvasSaveLayerWithoutBoundsOverride {
+class SkCanvasSaveLayerWithoutBoundsOverload {
   external void saveLayer(SkPaint paint);
 }
 
 @JS()
-class SkCanvasSaveLayerWithFilterOverride {
+class SkCanvasSaveLayerWithFilterOverload {
   external void saveLayer(
     SkPaint? paint,
     SkImageFilter? imageFilter,
@@ -1555,7 +1475,8 @@ class SkFontStyle {
 
 @JS()
 class SkFontMgr {
-
+  external String? getFamilyName(int fontId);
+  external void delete();
 }
 
 @JS()

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

@@ -23,7 +23,7 @@ class CkColorFilter extends ResurrectableSkiaObject<SkColorFilter> {
     SkColorFilter skColorFilter;
     switch (_engineFilter._type) {
       case EngineColorFilter._TypeMode:
-        skColorFilter = canvasKitJs.SkColorFilter.MakeBlend(
+        skColorFilter = canvasKit.SkColorFilter.MakeBlend(
           toSharedSkColor1(_engineFilter._color!),
           toSkBlendMode(_engineFilter._blendMode!),
         );
@@ -34,13 +34,13 @@ class CkColorFilter extends ResurrectableSkiaObject<SkColorFilter> {
         for (int i = 0; i < 20; i++) {
           colorMatrix[i] = matrix[i];
         }
-        skColorFilter = canvasKitJs.SkColorFilter.MakeMatrix(colorMatrix);
+        skColorFilter = canvasKit.SkColorFilter.MakeMatrix(colorMatrix);
         break;
       case EngineColorFilter._TypeLinearToSrgbGamma:
-        skColorFilter = canvasKitJs.SkColorFilter.MakeLinearToSRGBGamma();
+        skColorFilter = canvasKit.SkColorFilter.MakeLinearToSRGBGamma();
         break;
       case EngineColorFilter._TypeSrgbToLinearGamma:
-        skColorFilter = canvasKitJs.SkColorFilter.MakeSRGBToLinearGamma();
+        skColorFilter = canvasKit.SkColorFilter.MakeSRGBToLinearGamma();
         break;
       default:
         throw StateError(
@@ -49,9 +49,6 @@ class CkColorFilter extends ResurrectableSkiaObject<SkColorFilter> {
     return skColorFilter;
   }
 
-  @override
-  js.JsObject get legacySkiaObject => _jsObjectWrapper.wrapSkColorFilter(skiaObject);
-
   @override
   SkColorFilter createDefault() {
     return _createSkiaObjectFromFilter();

lib/web_ui/lib/src/engine/compositor/fonts.dart

@@ -41,7 +41,7 @@ class SkiaFontCollection {
     final List<Uint8List> fontBuffers =
         _registeredFonts.map<Uint8List>((f) => f!.bytes).toList();
 
-    skFontMgr = canvasKitJs.SkFontMgr.FromData(fontBuffers);
+    skFontMgr = canvasKit.SkFontMgr.FromData(fontBuffers);
   }
 
   /// Loads all of the unloaded fonts in [_unloadedFonts] and adds them
@@ -164,10 +164,9 @@ class SkiaFontCollection {
   }
 
   String? _readActualFamilyName(Uint8List bytes) {
-    final js.JsObject tmpFontMgr =
-        canvasKit['SkFontMgr'].callMethod('FromData', <Uint8List>[bytes]);
-    String? actualFamily = tmpFontMgr.callMethod('getFamilyName', <int>[0]);
-    tmpFontMgr.callMethod('delete');
+    final SkFontMgr tmpFontMgr = canvasKit.SkFontMgr.FromData([bytes])!;
+    String? actualFamily = tmpFontMgr.getFamilyName(0);
+    tmpFontMgr.delete();
     return actualFamily;
   }
 

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

@@ -8,7 +8,7 @@ part of engine;
 /// Instantiates a [ui.Codec] backed by an `SkImage` from Skia.
 void skiaInstantiateImageCodec(Uint8List list, Callback<ui.Codec> callback,
     [int? width, int? height, int? format, int? rowBytes]) {
-  final SkAnimatedImage skAnimatedImage = canvasKitJs.MakeAnimatedImageFromEncoded(list);
+  final SkAnimatedImage skAnimatedImage = canvasKit.MakeAnimatedImageFromEncoded(list);
   final CkAnimatedImage animatedImage = CkAnimatedImage(skAnimatedImage);
   final CkAnimatedImageCodec codec = CkAnimatedImageCodec(animatedImage);
   callback(codec);
@@ -55,7 +55,6 @@ class CkAnimatedImage implements ui.Image {
 /// A [ui.Image] backed by an `SkImage` from Skia.
 class CkImage implements ui.Image {
   final SkImage skImage;
-  late final js.JsObject legacyJsObject = _jsObjectWrapper.wrapSkImage(skImage);
 
   CkImage(this.skImage);
 

lib/web_ui/lib/src/engine/compositor/image_filter.dart

@@ -26,14 +26,11 @@ class CkImageFilter extends ResurrectableSkiaObject<SkImageFilter> implements ui
     rawSkiaObject?.delete();
   }
 
-  @override
-  js.JsObject get legacySkiaObject => _jsObjectWrapper.wrapSkImageFilter(skiaObject);
-
   SkImageFilter _initSkiaObject() {
-    return canvasKitJs.SkImageFilter.MakeBlur(
+    return canvasKit.SkImageFilter.MakeBlur(
       _sigmaX,
       _sigmaY,
-      canvasKitJs.TileMode.Clamp,
+      canvasKit.TileMode.Clamp,
       null,
     );
   }

lib/web_ui/lib/src/engine/compositor/initialization.dart

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-
 part of engine;
 
 /// EXPERIMENTAL: Enable the Skia-based rendering backend.
@@ -20,26 +19,22 @@ const bool canvasKitForceCpuOnly =
 /// NPM, update this URL to `https://unpkg.com/canvaskit-wasm@0.34.0/bin/`.
 const String canvasKitBaseUrl = 'https://unpkg.com/canvaskit-wasm@0.16.2/bin/';
 
-/// Initialize the Skia backend.
+/// Initialize CanvasKit.
 ///
 /// This calls `CanvasKitInit` and assigns the global [canvasKit] object.
-Future<void> initializeSkia() {
+Future<void> initializeCanvasKit() {
   final Completer<void> canvasKitCompleter = Completer<void>();
   late StreamSubscription<html.Event> loadSubscription;
   loadSubscription = domRenderer.canvasKitScript!.onLoad.listen((_) {
     loadSubscription.cancel();
-    final js.JsObject canvasKitInitArgs = js.JsObject.jsify(<String, dynamic>{
-      'locateFile': (String file, String unusedBase) => canvasKitBaseUrl + file,
-    });
-    final js.JsObject canvasKitInitPromise =
-        js.JsObject(js.context['CanvasKitInit'], <dynamic>[canvasKitInitArgs]);
-    canvasKitInitPromise.callMethod('then', <dynamic>[
-      (js.JsObject ck) {
-        canvasKit = ck;
-        initializeCanvasKitBindings(canvasKit);
-        canvasKitCompleter.complete();
-      },
-    ]);
+    final CanvasKitInitPromise canvasKitInitPromise = CanvasKitInit(CanvasKitInitOptions(
+      locateFile: js.allowInterop((String file, String unusedBase) => canvasKitBaseUrl + file),
+    ));
+    canvasKitInitPromise.then(js.allowInterop((CanvasKit ck) {
+      canvasKit = ck;
+      windowFlutterCanvasKit = canvasKit;
+      canvasKitCompleter.complete();
+    }));
   });
 
   /// Add a Skia scene host.
@@ -48,11 +43,6 @@ Future<void> initializeSkia() {
   return canvasKitCompleter.future;
 }
 
-/// The entrypoint into all CanvasKit functions and classes.
-///
-/// This is created by [initializeSkia].
-late js.JsObject canvasKit;
-
 /// The Skia font collection.
 SkiaFontCollection get skiaFontCollection => _skiaFontCollection!;
 SkiaFontCollection? _skiaFontCollection;

lib/web_ui/lib/src/engine/compositor/mask_filter.dart

@@ -20,16 +20,13 @@ class CkMaskFilter extends ResurrectableSkiaObject<SkMaskFilter> {
   SkMaskFilter resurrect() => _initSkiaObject();
 
   SkMaskFilter _initSkiaObject() {
-    return canvasKitJs.MakeBlurMaskFilter(
+    return canvasKit.MakeBlurMaskFilter(
       toSkBlurStyle(_blurStyle),
       _sigma,
       true,
     );
   }
 
-  @override
-  js.JsObject get legacySkiaObject => _jsObjectWrapper.wrapSkMaskFilter(skiaObject);
-
   @override
   void delete() {
     rawSkiaObject?.delete();

lib/web_ui/lib/src/engine/compositor/painting.dart

@@ -233,7 +233,4 @@ class CkPaint extends ResurrectableSkiaObject<SkPaint> implements ui.Paint {
   void delete() {
     rawSkiaObject?.delete();
   }
-
-  @override
-  js.JsObject get legacySkiaObject => _jsObjectWrapper.wrapSkPaint(skiaObject);
 }

lib/web_ui/lib/src/engine/compositor/path.dart

@@ -55,10 +55,10 @@ class CkPath implements ui.Path {
   void addPath(ui.Path path, ui.Offset offset, {Float64List? matrix4}) {
     List<double> skMatrix;
     if (matrix4 == null) {
-      skMatrix = makeSkMatrixFromFloat32(
+      skMatrix = toSkMatrixFromFloat32(
           Matrix4.translationValues(offset.dx, offset.dy, 0.0).storage);
     } else {
-      skMatrix = makeSkMatrixFromFloat64(matrix4);
+      skMatrix = toSkMatrixFromFloat64(matrix4);
       skMatrix[2] += offset.dx;
       skMatrix[5] += offset.dy;
     }
@@ -129,8 +129,7 @@ class CkPath implements ui.Path {
       double rotation = 0.0,
       bool largeArc = false,
       bool clockwise = true}) {
-    final SkPathArcToPointOverload overload = _jsObjectWrapper.castToSkPathArcToPointOverload(_skPath);
-    overload.arcTo(
+    (_skPath as SkPathArcToPointOverload).arcTo(
       radius.x,
       radius.y,
       rotation,
@@ -171,10 +170,10 @@ class CkPath implements ui.Path {
   void extendWithPath(ui.Path path, ui.Offset offset, {Float64List? matrix4}) {
     List<double> skMatrix;
     if (matrix4 == null) {
-      skMatrix = makeSkMatrixFromFloat32(
+      skMatrix = toSkMatrixFromFloat32(
           Matrix4.translationValues(offset.dx, offset.dy, 0.0).storage);
     } else {
-      skMatrix = makeSkMatrixFromFloat64(matrix4);
+      skMatrix = toSkMatrixFromFloat64(matrix4);
       skMatrix[2] += offset.dx;
       skMatrix[5] += offset.dy;
     }
@@ -276,7 +275,7 @@ class CkPath implements ui.Path {
   ) {
     final CkPath path1 = uiPath1 as CkPath;
     final CkPath path2 = uiPath2 as CkPath;
-    final SkPath newPath = canvasKitJs.MakePathFromOp(
+    final SkPath newPath = canvasKit.MakePathFromOp(
       path1._skPath,
       path2._skPath,
       toSkPathOp(operation),

lib/web_ui/lib/src/engine/compositor/picture.dart

@@ -30,9 +30,6 @@ class CkPicture implements ui.Picture {
 class SkPictureSkiaObject extends OneShotSkiaObject<SkPicture> {
   SkPictureSkiaObject(SkPicture picture) : super(picture);
 
-  @override
-  js.JsObject get legacySkiaObject => _jsObjectWrapper.wrapSkPicture(skiaObject);
-
   @override
   void delete() {
     rawSkiaObject?.delete();

lib/web_ui/lib/src/engine/compositor/skia_object_cache.dart

@@ -89,10 +89,6 @@ abstract class SkiaObject<T> {
   /// The JavaScript object that's mapped onto a Skia C++ object in the WebAssembly heap.
   T get skiaObject;
 
-  /// The legacy view on the [skiaObject].
-  // TODO(yjbanov): remove this after completing JS-interop migration.
-  js.JsObject? get legacySkiaObject;
-
   /// Deletes the associated C++ object from the WebAssembly heap.
   void delete();
 

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

@@ -38,7 +38,7 @@ class Surface {
 
   CkSurface? _surface;
   html.Element? htmlElement;
-  js.JsObject? _grContext;
+  SkGrContext? _grContext;
   int? _skiaCacheBytes;
 
   /// Specify the GPU resource cache limits.
@@ -49,8 +49,7 @@ class Surface {
 
   void _syncCacheBytes() {
     if(_skiaCacheBytes != null) {
-      _grContext?.callMethod('setResourceCacheLimitBytes', <dynamic>[
-        _skiaCacheBytes]);
+      _grContext?.setResourceCacheLimitBytes(_skiaCacheBytes!);
     }
   }
 
@@ -67,7 +66,7 @@ class Surface {
     final CkSurface surface = acquireRenderSurface(size);
 
     if (surface.context != null) {
-      canvasKit.callMethod('setCurrentContext', <int?>[surface.context]);
+      canvasKit.setCurrentContext(surface.context!);
     }
     SubmitCallback submitCallback =
         (SurfaceFrame surfaceFrame, CkCanvas canvas) {
@@ -127,19 +126,20 @@ class Surface {
       return _makeSoftwareCanvasSurface(htmlCanvas);
     } else {
       // Try WebGL first.
-      final int glContext = canvasKit.callMethod('GetWebGLContext', <dynamic>[
+      final int glContext = canvasKit.GetWebGLContext(
         htmlCanvas,
-        // Default to no anti-aliasing. Paint commands can be explicitly
-        // anti-aliased by setting their `Paint` object's `antialias` property.
-        js.JsObject.jsify({'antialias': 0}),
-      ]);
+        SkWebGLContextOptions(
+          // Default to no anti-aliasing. Paint commands can be explicitly
+          // anti-aliased by setting their `Paint` object's `antialias` property.
+          anitalias: 0,
+        ),
+      );
 
       if (glContext == 0) {
         return _makeSoftwareCanvasSurface(htmlCanvas);
       }
 
-      _grContext =
-          canvasKit.callMethod('MakeGrContext', <dynamic>[glContext]);
+      _grContext = canvasKit.MakeGrContext(glContext);
 
       if (_grContext == null) {
         throw CanvasKitError('Failed to initialize CanvasKit. CanvasKit.MakeGrContext returned null.');
@@ -149,13 +149,12 @@ class Surface {
       // CanvasKit's default.
       _syncCacheBytes();
 
-      js.JsObject? skSurface =
-          canvasKit.callMethod('MakeOnScreenGLSurface', <dynamic>[
-        _grContext,
+      SkSurface? skSurface = canvasKit.MakeOnScreenGLSurface(
+        _grContext!,
         size.width,
         size.height,
-        canvasKit['SkColorSpace']['SRGB'],
-      ]);
+        SkColorSpaceSRGB,
+      );
 
       if (skSurface == null) {
         return _makeSoftwareCanvasSurface(htmlCanvas);
@@ -173,9 +172,7 @@ class Surface {
       _didWarnAboutWebGlInitializationFailure = true;
     }
     return CkSurface(
-      canvasKit.callMethod('MakeSWCanvasSurface', <dynamic>[
-        htmlCanvas,
-      ]),
+      canvasKit.MakeSWCanvasSurface(htmlCanvas),
       null,
       null,
     );
@@ -183,7 +180,7 @@ class Surface {
 
   bool _presentSurface() {
     if (_surface!.context != null) {
-      canvasKit.callMethod('setCurrentContext', <int?>[_surface!.context]);
+      canvasKit.setCurrentContext(_surface!.context!);
     }
     _surface!.flush();
     return true;
@@ -192,28 +189,25 @@ class Surface {
 
 /// A Dart wrapper around Skia's CkSurface.
 class CkSurface {
-  final js.JsObject _surface;
-  final js.JsObject? _grContext;
+  final SkSurface _surface;
+  final SkGrContext? _grContext;
   final int? _glContext;
 
   CkSurface(this._surface, this._grContext, this._glContext);
 
   CkCanvas getCanvas() {
-    final js.JsObject skCanvas = _surface.callMethod('getCanvas');
-    return CkCanvas(
-      _jsObjectWrapper.unwrapSkCanvas(skCanvas),
-    );
+    return CkCanvas(_surface.getCanvas());
   }
 
   /// Flushes the graphics to be rendered on screen.
   void flush() {
-    _surface.callMethod('flush');
+    _surface.flush();
   }
 
   int? get context => _glContext;
 
-  int width() => _surface.callMethod('width');
-  int height() => _surface.callMethod('height');
+  int width() => _surface.width();
+  int height() => _surface.height();
 
   void dispose() {
     if (_isDisposed) {
@@ -221,14 +215,14 @@ class CkSurface {
     }
     // Only resources from the current context can be disposed.
     if (_glContext != null) {
-      canvasKit.callMethod('setCurrentContext', <int?>[_glContext]);
+      canvasKit.setCurrentContext(_glContext!);
     }
-    _surface.callMethod('dispose');
+    _surface.dispose();
 
     // In CPU-only mode there's no graphics context.
     if (_grContext != null) {
-      _grContext!.callMethod('releaseResourcesAndAbandonContext');
-      _grContext!.callMethod('delete');
+      _grContext!.releaseResourcesAndAbandonContext();
+      _grContext!.delete();
     }
     _isDisposed = true;
   }

lib/web_ui/lib/src/engine/compositor/text.dart

@@ -107,7 +107,7 @@ class CkParagraphStyle implements ui.ParagraphStyle {
     properties.textStyle =
         toSkTextStyleProperties(fontFamily, fontSize, fontWeight, fontStyle);
 
-    return canvasKitJs.ParagraphStyle(properties);
+    return canvasKit.ParagraphStyle(properties);
   }
 }
 
@@ -146,15 +146,15 @@ class CkTextStyle implements ui.TextStyle {
     }
 
     if (decoration != null) {
-      int decorationValue = canvasKitJs.NoDecoration;
+      int decorationValue = canvasKit.NoDecoration;
       if (decoration.contains(ui.TextDecoration.underline)) {
-        decorationValue |= canvasKitJs.UnderlineDecoration;
+        decorationValue |= canvasKit.UnderlineDecoration;
       }
       if (decoration.contains(ui.TextDecoration.overline)) {
-        decorationValue |= canvasKitJs.OverlineDecoration;
+        decorationValue |= canvasKit.OverlineDecoration;
       }
       if (decoration.contains(ui.TextDecoration.lineThrough)) {
-        decorationValue |= canvasKitJs.LineThroughDecoration;
+        decorationValue |= canvasKit.LineThroughDecoration;
       }
       properties.decoration = decorationValue;
     }
@@ -201,7 +201,7 @@ class CkTextStyle implements ui.TextStyle {
     //   - locale
     //   - shadows
     //   - fontFeatures
-    return CkTextStyle._(canvasKitJs.TextStyle(properties));
+    return CkTextStyle._(canvasKit.TextStyle(properties));
   }
 
   CkTextStyle._(this.skTextStyle);
@@ -280,9 +280,6 @@ class CkParagraph extends ResurrectableSkiaObject<SkParagraph> implements ui.Par
     rawSkiaObject?.delete();
   }
 
-  @override
-  js.JsObject get legacySkiaObject => _jsObjectWrapper.wrapSkParagraph(skiaObject);
-
   @override
   bool get isResurrectionExpensive => true;
 
@@ -416,7 +413,7 @@ class CkParagraphBuilder implements ui.ParagraphBuilder {
   CkParagraphBuilder(ui.ParagraphStyle style)
       : _commands = <_ParagraphCommand>[],
         _style = style as CkParagraphStyle,
-        _paragraphBuilder = canvasKitJs.ParagraphBuilder.Make(
+        _paragraphBuilder = canvasKit.ParagraphBuilder.Make(
           style.skParagraphStyle,
           skiaFontCollection.skFontMgr,
         );

lib/web_ui/lib/src/engine/compositor/util.dart

@@ -15,44 +15,6 @@ class CanvasKitError extends Error {
   String toString() => 'CanvasKitError: $message';
 }
 
-js.JsObject _mallocColorArray() {
-  return canvasKit
-      .callMethod('Malloc', <dynamic>[js.context['Float32Array'], 4]);
-}
-
-js.JsObject? sharedSkColor1;
-js.JsObject? sharedSkColor2;
-js.JsObject? sharedSkColor3;
-
-void _setSharedColor(js.JsObject sharedColor, ui.Color color) {
-  Float32List array = sharedColor.callMethod('toTypedArray');
-  array[0] = color.red / 255.0;
-  array[1] = color.green / 255.0;
-  array[2] = color.blue / 255.0;
-  array[3] = color.alpha / 255.0;
-}
-
-void setSharedSkColor1(ui.Color color) {
-  if (sharedSkColor1 == null) {
-    sharedSkColor1 = _mallocColorArray();
-  }
-  _setSharedColor(sharedSkColor1!, color);
-}
-
-void setSharedSkColor2(ui.Color color) {
-  if (sharedSkColor2 == null) {
-    sharedSkColor2 = _mallocColorArray();
-  }
-  _setSharedColor(sharedSkColor2!, color);
-}
-
-void setSharedSkColor3(ui.Color color) {
-  if (sharedSkColor3 == null) {
-    sharedSkColor3 = _mallocColorArray();
-  }
-  _setSharedColor(sharedSkColor3!, color);
-}
-
 /// Creates a new color array.
 Float32List makeFreshSkColor(ui.Color color) {
   final Float32List result = Float32List(4);
@@ -63,34 +25,6 @@ Float32List makeFreshSkColor(ui.Color color) {
   return result;
 }
 
-js.JsObject makeSkRect(ui.Rect rect) {
-  return js.JsObject(canvasKit['LTRBRect'],
-      <double>[rect.left, rect.top, rect.right, rect.bottom]);
-}
-
-js.JsObject makeSkRRect(ui.RRect rrect) {
-  return js.JsObject.jsify({
-    'rect': makeSkRect(rrect.outerRect),
-    'rx1': rrect.tlRadiusX,
-    'ry1': rrect.tlRadiusY,
-    'rx2': rrect.trRadiusX,
-    'ry2': rrect.trRadiusY,
-    'rx3': rrect.brRadiusX,
-    'ry3': rrect.brRadiusY,
-    'rx4': rrect.blRadiusX,
-    'ry4': rrect.blRadiusY,
-  });
-}
-
-ui.Rect fromSkRect(js.JsObject skRect) {
-  return ui.Rect.fromLTRB(
-    skRect['fLeft'],
-    skRect['fTop'],
-    skRect['fRight'],
-    skRect['fBottom'],
-  );
-}
-
 ui.TextPosition fromPositionWithAffinity(SkTextPosition positionWithAffinity) {
   final ui.TextAffinity affinity = ui.TextAffinity.values[positionWithAffinity.affinity.value];
   return ui.TextPosition(
@@ -99,194 +33,6 @@ ui.TextPosition fromPositionWithAffinity(SkTextPosition positionWithAffinity) {
   );
 }
 
-js.JsArray<double> makeSkPoint(ui.Offset point) {
-  final js.JsArray<double> skPoint = js.JsArray<double>();
-  skPoint.length = 2;
-  skPoint[0] = point.dx;
-  skPoint[1] = point.dy;
-  return skPoint;
-}
-
-// TODO(hterkelsen): https://github.com/flutter/flutter/issues/58824
-/// Creates a point list using a 2D JS array.
-js.JsArray<js.JsArray<double>>? encodePointList(List<ui.Offset>? points) {
-  if (points == null) {
-    return null;
-  }
-  final int pointCount = points.length;
-  final js.JsArray<js.JsArray<double>> result =
-      js.JsArray<js.JsArray<double>>();
-  result.length = pointCount;
-  for (int i = 0; i < pointCount; ++i) {
-    final ui.Offset point = points[i];
-    assert(_offsetIsValid(point));
-    final js.JsArray<double> skPoint = js.JsArray<double>();
-    skPoint.length = 2;
-    skPoint[0] = point.dx;
-    skPoint[1] = point.dy;
-    result[i] = skPoint;
-  }
-  return result;
-}
-
-// TODO(hterkelsen): https://github.com/flutter/flutter/issues/58824
-/// Creates a point list using a 2D JS array.
-List<List<double>>? encodeRawPointList(Float32List? points) {
-  if (points == null) {
-    return null;
-  }
-  assert(points.length % 2 == 0);
-  var pointLength = points.length ~/ 2;
-  final js.JsArray<js.JsArray<double>> result =
-      js.JsArray<js.JsArray<double>>();
-  result.length = pointLength;
-  for (var i = 0; i < pointLength; i++) {
-    var x = i * 2;
-    var y = x + 1;
-    final js.JsArray<double> skPoint = js.JsArray<double>();
-    skPoint.length = 2;
-    skPoint[0] = points[x];
-    skPoint[1] = points[y];
-    result[i] = skPoint;
-  }
-  return result;
-}
-
-js.JsObject? makeSkPointMode(ui.PointMode pointMode) {
-  switch (pointMode) {
-    case ui.PointMode.points:
-      return canvasKit['PointMode']['Points'];
-    case ui.PointMode.lines:
-      return canvasKit['PointMode']['Lines'];
-    case ui.PointMode.polygon:
-      return canvasKit['PointMode']['Polygon'];
-    default:
-      throw StateError('Unrecognized point mode $pointMode');
-  }
-}
-
-js.JsObject? makeSkBlendMode(ui.BlendMode? blendMode) {
-  switch (blendMode) {
-    case ui.BlendMode.clear:
-      return canvasKit['BlendMode']['Clear'];
-    case ui.BlendMode.src:
-      return canvasKit['BlendMode']['Src'];
-    case ui.BlendMode.dst:
-      return canvasKit['BlendMode']['Dst'];
-    case ui.BlendMode.srcOver:
-      return canvasKit['BlendMode']['SrcOver'];
-    case ui.BlendMode.dstOver:
-      return canvasKit['BlendMode']['DstOver'];
-    case ui.BlendMode.srcIn:
-      return canvasKit['BlendMode']['SrcIn'];
-    case ui.BlendMode.dstIn:
-      return canvasKit['BlendMode']['DstIn'];
-    case ui.BlendMode.srcOut:
-      return canvasKit['BlendMode']['SrcOut'];
-    case ui.BlendMode.dstOut:
-      return canvasKit['BlendMode']['DstOut'];
-    case ui.BlendMode.srcATop:
-      return canvasKit['BlendMode']['SrcATop'];
-    case ui.BlendMode.dstATop:
-      return canvasKit['BlendMode']['DstATop'];
-    case ui.BlendMode.xor:
-      return canvasKit['BlendMode']['Xor'];
-    case ui.BlendMode.plus:
-      return canvasKit['BlendMode']['Plus'];
-    case ui.BlendMode.modulate:
-      return canvasKit['BlendMode']['Modulate'];
-    case ui.BlendMode.screen:
-      return canvasKit['BlendMode']['Screen'];
-    case ui.BlendMode.overlay:
-      return canvasKit['BlendMode']['Overlay'];
-    case ui.BlendMode.darken:
-      return canvasKit['BlendMode']['Darken'];
-    case ui.BlendMode.lighten:
-      return canvasKit['BlendMode']['Lighten'];
-    case ui.BlendMode.colorDodge:
-      return canvasKit['BlendMode']['ColorDodge'];
-    case ui.BlendMode.colorBurn:
-      return canvasKit['BlendMode']['ColorBurn'];
-    case ui.BlendMode.hardLight:
-      return canvasKit['BlendMode']['HardLight'];
-    case ui.BlendMode.softLight:
-      return canvasKit['BlendMode']['SoftLight'];
-    case ui.BlendMode.difference:
-      return canvasKit['BlendMode']['Difference'];
-    case ui.BlendMode.exclusion:
-      return canvasKit['BlendMode']['Exclusion'];
-    case ui.BlendMode.multiply:
-      return canvasKit['BlendMode']['Multiply'];
-    case ui.BlendMode.hue:
-      return canvasKit['BlendMode']['Hue'];
-    case ui.BlendMode.saturation:
-      return canvasKit['BlendMode']['Saturation'];
-    case ui.BlendMode.color:
-      return canvasKit['BlendMode']['Color'];
-    case ui.BlendMode.luminosity:
-      return canvasKit['BlendMode']['Luminosity'];
-    default:
-      return null;
-  }
-}
-
-// Mappings from SkMatrix-index to input-index.
-const List<int> _skMatrixIndexToMatrix4Index = <int>[
-  0, 4, 12, // Row 1
-  1, 5, 13, // Row 2
-  3, 7, 15, // Row 3
-];
-
-/// Converts a 4x4 Flutter matrix (represented as a [Float32List]) to an
-/// SkMatrix, which is a 3x3 transform matrix.
-js.JsArray<double> makeSkMatrixFromFloat32(Float32List? matrix4) {
-  final js.JsArray<double> skMatrix = js.JsArray<double>();
-  skMatrix.length = 9;
-  for (int i = 0; i < 9; ++i) {
-    final int matrix4Index = _skMatrixIndexToMatrix4Index[i];
-    if (matrix4Index < matrix4!.length)
-      skMatrix[i] = matrix4[matrix4Index];
-    else
-      skMatrix[i] = 0.0;
-  }
-  return skMatrix;
-}
-
-js.JsArray<double> makeSkMatrixFromFloat64(Float64List matrix4) {
-  final js.JsArray<double> skMatrix = js.JsArray<double>();
-  skMatrix.length = 9;
-  for (int i = 0; i < 9; ++i) {
-    final int matrix4Index = _skMatrixIndexToMatrix4Index[i];
-    if (matrix4Index < matrix4.length)
-      skMatrix[i] = matrix4[matrix4Index];
-    else
-      skMatrix[i] = 0.0;
-  }
-  return skMatrix;
-}
-
-/// Color stops used when the framework specifies `null`.
-final js.JsArray<double> _kDefaultColorStops = () {
-  final js.JsArray<double> jsColorStops = js.JsArray<double>();
-  jsColorStops.length = 2;
-  jsColorStops[0] = 0;
-  jsColorStops[1] = 1;
-  return jsColorStops;
-}();
-
-/// Converts a list of color stops into a Skia-compatible JS array or color stops.
-///
-/// In Flutter `null` means two color stops `[0, 1]` that in Skia must be specified explicitly.
-js.JsArray<double> makeSkiaColorStops(List<double>? colorStops) {
-  if (colorStops == null) {
-    return _kDefaultColorStops;
-  }
-
-  final js.JsArray<double> jsColorStops = js.JsArray<double>.from(colorStops);
-  jsColorStops.length = colorStops.length;
-  return jsColorStops;
-}
-
 void drawSkShadow(
   SkCanvas skCanvas,
   CkPath path,
@@ -313,7 +59,7 @@ void drawSkShadow(
   );
 
   final SkTonalColors tonalColors =
-      canvasKitJs.computeTonalColors(inTonalColors);
+      canvasKit.computeTonalColors(inTonalColors);
 
   skCanvas.drawShadow(
     path._skPath,

lib/web_ui/lib/src/engine/compositor/vertices.dart

@@ -27,7 +27,7 @@ class CkVertices implements ui.Vertices {
       throw ArgumentError(
           '"indices" values must be valid indices in the positions list.');
 
-    skVertices = canvasKitJs.MakeSkVertices(
+    skVertices = canvasKit.MakeSkVertices(
       toSkVertexMode(mode),
       toSkPoints2d(positions),
       textureCoordinates != null ? toSkPoints2d(textureCoordinates) : null,
@@ -55,7 +55,7 @@ class CkVertices implements ui.Vertices {
       throw ArgumentError(
           '"indices" values must be valid indices in the positions list.');
 
-    skVertices = canvasKitJs.MakeSkVertices(
+    skVertices = canvasKit.MakeSkVertices(
       toSkVertexMode(mode),
       rawPointsToSkPoints2d(positions),
       textureCoordinates != null ? rawPointsToSkPoints2d(textureCoordinates) : null,

lib/web_ui/lib/src/engine/shader.dart

@@ -158,7 +158,7 @@ class GradientLinear extends EngineGradient {
   SkShader createSkiaShader() {
     assert(experimentalUseSkia);
 
-    return canvasKitJs.SkShader.MakeLinearGradient(
+    return canvasKit.SkShader.MakeLinearGradient(
       toSkPoint(from),
       toSkPoint(to),
       toSkFloatColorList(colors),
@@ -212,7 +212,7 @@ class GradientRadial extends EngineGradient {
   SkShader createSkiaShader() {
     assert(experimentalUseSkia);
 
-    return canvasKitJs.SkShader.MakeRadialGradient(
+    return canvasKit.SkShader.MakeRadialGradient(
       toSkPoint(center),
       radius,
       toSkFloatColorList(colors),
@@ -246,7 +246,7 @@ class GradientConical extends EngineGradient {
   @override
   SkShader createSkiaShader() {
     assert(experimentalUseSkia);
-    return canvasKitJs.SkShader.MakeTwoPointConicalGradient(
+    return canvasKit.SkShader.MakeTwoPointConicalGradient(
       toSkPoint(focal),
       focalRadius,
       toSkPoint(center),

lib/web_ui/lib/src/ui/initialization.dart

@@ -31,7 +31,7 @@ Future<void> _initializePlatform({
   // This needs to be after `webOnlyInitializeEngine` because that is where the
   // canvaskit script is added to the page.
   if (engine.experimentalUseSkia) {
-    await engine.initializeSkia();
+    await engine.initializeCanvasKit();
   }
 
   assetManager ??= const engine.AssetManager();

lib/web_ui/test/canvaskit/skia_objects_cache_test.dart

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 // @dart = 2.6
-import 'dart:js';
 
 import 'package:mockito/mockito.dart';
 import 'package:test/test.dart';
@@ -45,7 +44,7 @@ void _tests() {
       expect(testObject.deleteCount, 0);
 
       // Check that the getter does not have side-effects
-      final JsObject skiaObject1 = testObject.legacySkiaObject;
+      final SkPaint skiaObject1 = testObject.skiaObject;
       expect(skiaObject1, isNotNull);
       expect(SkiaObjects.resurrectableObjects.single, testObject);
       expect(testObject.createDefaultCount, 1);
@@ -61,7 +60,7 @@ void _tests() {
       expect(testObject.deleteCount, 1);
 
       // Trigger resurrect
-      final JsObject skiaObject2 = testObject.legacySkiaObject;
+      final SkPaint skiaObject2 = testObject.skiaObject;
       expect(skiaObject2, isNotNull);
       expect(skiaObject2, isNot(same(skiaObject1)));
       expect(SkiaObjects.resurrectableObjects.single, testObject);
@@ -146,9 +145,6 @@ class TestOneShotSkiaObject extends OneShotSkiaObject<SkPaint> {
 
   TestOneShotSkiaObject() : super(SkPaint());
 
-  @override
-  JsObject get legacySkiaObject => debugJsObjectWrapper.wrapSkPaint(skiaObject);
-
   @override
   void delete() {
     rawSkiaObject?.delete();
@@ -183,9 +179,6 @@ class TestSkiaObject extends ResurrectableSkiaObject<SkPaint> {
     deleteCount++;
   }
 
-  @override
-  JsObject get legacySkiaObject => debugJsObjectWrapper.wrapSkPaint(skiaObject);
-
   @override
   bool get isResurrectionExpensive => isExpensive;
 }