@shopify/react-native-skia 0.1.142 → 0.1.146

package/src/skia/web/JsiSkMatrix.ts

@@ -2,7 +2,7 @@ import type { CanvasKit, Matrix3x3 } from "canvaskit-wasm";
 
 import type { SkMatrix } from "../types";
 
-import { HostObject, toValue } from "./Host";
+import { HostObject } from "./Host";
 
 export class JsiSkMatrix
   extends HostObject<Matrix3x3, "Matrix">
@@ -13,7 +13,9 @@ export class JsiSkMatrix
   }
 
   concat(matrix: SkMatrix) {
-    this.ref.set(this.CanvasKit.Matrix.multiply(this.ref, toValue(matrix)));
+    this.ref.set(
+      this.CanvasKit.Matrix.multiply(this.ref, JsiSkMatrix.fromValue(matrix))
+    );
   }
 
   translate(x: number, y: number) {

package/src/skia/web/JsiSkPaint.ts

@@ -14,11 +14,15 @@ import type {
   SkPathEffect,
 } from "../types";
 
-import { HostObject, toNullableValue, ckEnum } from "./Host";
+import { HostObject, ckEnum } from "./Host";
+import { JsiSkColorFilter } from "./JsiSkColorFilter";
+import { JsiSkImageFilter } from "./JsiSkImageFilter";
+import { JsiSkMaskFilter } from "./JsiSkMaskFilter";
+import { JsiSkPathEffect } from "./JsiSkPathEffect";
+import { JsiSkShader } from "./JsiSkShader";
 
 export class JsiSkPaint extends HostObject<Paint, "Paint"> implements SkPaint {
   constructor(CanvasKit: CanvasKit, ref: Paint) {
-    ref.setAntiAlias(true);
     super(CanvasKit, ref, "Paint");
   }
 
@@ -26,6 +30,10 @@ export class JsiSkPaint extends HostObject<Paint, "Paint"> implements SkPaint {
     return new JsiSkPaint(this.CanvasKit, this.ref.copy());
   }
 
+  reset() {
+    this.ref = new this.CanvasKit.Paint();
+  }
+
   getColor() {
     return this.ref.getColor();
   }
@@ -63,23 +71,23 @@ export class JsiSkPaint extends HostObject<Paint, "Paint"> implements SkPaint {
   }
 
   setColorFilter(filter: SkColorFilter | null) {
-    this.ref.setColorFilter(toNullableValue(filter));
+    this.ref.setColorFilter(filter ? JsiSkColorFilter.fromValue(filter) : null);
   }
 
   setImageFilter(filter: SkImageFilter | null) {
-    this.ref.setImageFilter(toNullableValue(filter));
+    this.ref.setImageFilter(filter ? JsiSkImageFilter.fromValue(filter) : null);
   }
 
   setMaskFilter(filter: SkMaskFilter | null) {
-    this.ref.setMaskFilter(toNullableValue(filter));
+    this.ref.setMaskFilter(filter ? JsiSkMaskFilter.fromValue(filter) : null);
   }
 
   setPathEffect(effect: SkPathEffect | null) {
-    this.ref.setPathEffect(toNullableValue(effect));
+    this.ref.setPathEffect(effect ? JsiSkPathEffect.fromValue(effect) : null);
   }
 
   setShader(shader: SkShader | null) {
-    this.ref.setShader(toNullableValue(shader));
+    this.ref.setShader(shader ? JsiSkShader.fromValue(shader) : null);
   }
 
   setStrokeCap(cap: StrokeCap) {

package/src/skia/web/JsiSkPath.ts

@@ -13,10 +13,11 @@ import type {
   StrokeOpts,
 } from "../types";
 
-import { ckEnum, HostObject, optEnum, toValue } from "./Host";
+import { ckEnum, HostObject, optEnum } from "./Host";
 import { JsiSkPoint } from "./JsiSkPoint";
 import { JsiSkRect } from "./JsiSkRect";
 import { JsiSkRRect } from "./JsiSkRRect";
+import { JsiSkMatrix } from "./JsiSkMatrix";
 
 const CommandCount = {
   [PathVerb.Move]: 3,
@@ -27,20 +28,6 @@ const CommandCount = {
   [PathVerb.Close]: 1,
 };
 
-const areCmdsInterpolatable = (cmd1: PathCommand[], cmd2: PathCommand[]) => {
-  if (cmd1.length !== cmd2.length) {
-    return false;
-  }
-  for (let i = 0; i < cmd1.length; i++) {
-    if (cmd1[i][0] !== cmd2[i][0]) {
-      return false;
-    } else if (cmd1[i][0] === PathVerb.Conic && cmd1[i][5] !== cmd2[i][5]) {
-      return false;
-    }
-  }
-  return true;
-};
-
 export class JsiSkPath extends HostObject<Path, "Path"> implements SkPath {
   constructor(CanvasKit: CanvasKit, ref: Path) {
     super(CanvasKit, ref, "Path");
@@ -74,7 +61,7 @@ export class JsiSkPath extends HostObject<Path, "Path"> implements SkPath {
 
   addPoly(points: SkPoint[], close: boolean) {
     this.ref.addPoly(
-      points.map((p) => toValue(p)),
+      points.map((p) => Array.from(JsiSkPoint.fromValue(p))).flat(),
       close
     );
     return this;
@@ -256,7 +243,7 @@ export class JsiSkPath extends HostObject<Path, "Path"> implements SkPath {
   }
 
   equals(other: SkPath) {
-    return this.ref.equals(toValue(other));
+    return this.ref.equals(JsiSkPath.fromValue(other));
   }
 
   getBounds() {
@@ -293,9 +280,7 @@ export class JsiSkPath extends HostObject<Path, "Path"> implements SkPath {
   }
 
   addCircle(x: number, y: number, r: number) {
-    // We leave the comment below to remind us that this is not implemented in CanvasKit
-    // throw new NotImplementedOnRNWeb();
-    this.ref.addOval(this.CanvasKit.LTRBRect(x - r, y - r, x + r, y + r));
+    this.ref.addCircle(x, y, r);
     return this;
   }
 
@@ -307,7 +292,7 @@ export class JsiSkPath extends HostObject<Path, "Path"> implements SkPath {
   }
 
   op(path: SkPath, op: PathOp) {
-    return this.ref.op(toValue(path), ckEnum(op));
+    return this.ref.op(JsiSkPath.fromValue(path), ckEnum(op));
   }
 
   simplify() {
@@ -324,34 +309,15 @@ export class JsiSkPath extends HostObject<Path, "Path"> implements SkPath {
   }
 
   transform(m3: SkMatrix) {
-    this.ref.transform(toValue(m3));
+    this.ref.transform(JsiSkMatrix.fromValue(m3));
   }
 
   interpolate(end: SkPath, t: number) {
-    // Do not remove the comment below. We use it to track missing APIs in CanvasKit
-    // throw new NotImplementedOnRNWeb();
-    const cmd1 = this.toCmds();
-    const cmd2 = end.toCmds();
-    if (!areCmdsInterpolatable(cmd1, cmd2)) {
-      return null;
-    }
-    const interpolated: PathCommand[] = [];
-    cmd1.forEach((cmd, i) => {
-      const interpolatedCmd = [cmd[0]];
-      interpolated.push(interpolatedCmd);
-      cmd.forEach((c, j) => {
-        if (j === 0) {
-          return;
-        }
-        if (interpolatedCmd[0] === PathVerb.Conic && j === 5) {
-          interpolatedCmd.push(c);
-        } else {
-          const c2 = cmd2[i][j];
-          interpolatedCmd.push(c2 + (c - c2) * t);
-        }
-      });
-    });
-    const path = this.CanvasKit.Path.MakeFromCmds(interpolated.flat());
+    const path = this.CanvasKit.Path.MakeFromPathInterpolation(
+      this.ref,
+      JsiSkPath.fromValue(end),
+      t
+    );
     if (path === null) {
       return null;
     }
@@ -359,11 +325,10 @@ export class JsiSkPath extends HostObject<Path, "Path"> implements SkPath {
   }
 
   isInterpolatable(path2: SkPath): boolean {
-    // Do not remove the comment below. We use it to track missing APIs in CanvasKit
-    // throw new NotImplementedOnRNWeb();
-    const cmd1 = this.toCmds();
-    const cmd2 = path2.toCmds();
-    return areCmdsInterpolatable(cmd1, cmd2);
+    return this.CanvasKit.Path.CanInterpolate(
+      this.ref,
+      JsiSkPath.fromValue(path2)
+    );
   }
 
   toCmds() {

package/src/skia/web/JsiSkPathEffectFactory.ts

@@ -8,7 +8,9 @@ import type {
   SkPathEffect,
 } from "../types";
 
-import { ckEnum, Host, NotImplementedOnRNWeb, toValue } from "./Host";
+import { ckEnum, Host, NotImplementedOnRNWeb } from "./Host";
+import { JsiSkMatrix } from "./JsiSkMatrix";
+import { JsiSkPath } from "./JsiSkPath";
 import { JsiSkPathEffect } from "./JsiSkPathEffect";
 
 export class JsiSkPathEffectFactory extends Host implements PathEffectFactory {
@@ -47,7 +49,10 @@ export class JsiSkPathEffectFactory extends Host implements PathEffectFactory {
   }
 
   MakeLine2D(width: number, matrix: SkMatrix) {
-    const pe = this.CanvasKit.PathEffect.MakeLine2D(width, toValue(matrix));
+    const pe = this.CanvasKit.PathEffect.MakeLine2D(
+      width,
+      JsiSkMatrix.fromValue(matrix)
+    );
     if (pe === null) {
       return null;
     }
@@ -61,7 +66,7 @@ export class JsiSkPathEffectFactory extends Host implements PathEffectFactory {
     style: Path1DEffectStyle
   ) {
     const pe = this.CanvasKit.PathEffect.MakePath1D(
-      toValue(path),
+      JsiSkPath.fromValue(path),
       advance,
       phase,
       ckEnum(style)
@@ -74,8 +79,8 @@ export class JsiSkPathEffectFactory extends Host implements PathEffectFactory {
 
   MakePath2D(matrix: SkMatrix, path: SkPath) {
     const pe = this.CanvasKit.PathEffect.MakePath2D(
-      toValue(matrix),
-      toValue(path)
+      JsiSkMatrix.fromValue(matrix),
+      JsiSkPath.fromValue(path)
     );
     if (pe === null) {
       return null;

package/src/skia/web/JsiSkPathFactory.ts

@@ -3,7 +3,7 @@ import type { CanvasKit } from "canvaskit-wasm";
 import type { PathCommand, PathOp, SkFont, SkPath } from "../types";
 import type { PathFactory } from "../types/Path/PathFactory";
 
-import { Host, ckEnum, toValue, NotImplementedOnRNWeb } from "./Host";
+import { Host, ckEnum, NotImplementedOnRNWeb } from "./Host";
 import { JsiSkPath } from "./JsiSkPath";
 
 export class JsiSkPathFactory extends Host implements PathFactory {
@@ -25,8 +25,8 @@ export class JsiSkPathFactory extends Host implements PathFactory {
 
   MakeFromOp(one: SkPath, two: SkPath, op: PathOp) {
     const path = this.CanvasKit.Path.MakeFromOp(
-      toValue(one),
-      toValue(two),
+      JsiSkPath.fromValue(one),
+      JsiSkPath.fromValue(two),
       ckEnum(op)
     );
     if (path === null) {

package/src/skia/web/JsiSkPicture.ts

@@ -9,8 +9,10 @@ import type {
   SkMatrix,
 } from "../types";
 
-import { HostObject, toValue, ckEnum } from "./Host";
+import { HostObject, ckEnum } from "./Host";
 import { JsiSkShader } from "./JsiSkShader";
+import { JsiSkMatrix } from "./JsiSkMatrix";
+import { JsiSkRect } from "./JsiSkRect";
 
 export class JsiSkPicture
   extends HostObject<Picture, "Picture">
@@ -33,8 +35,8 @@ export class JsiSkPicture
         ckEnum(tmx),
         ckEnum(tmy),
         ckEnum(mode),
-        localMatrix ? toValue(localMatrix) : undefined,
-        tileRect ? toValue(tileRect) : undefined
+        localMatrix ? JsiSkMatrix.fromValue(localMatrix) : undefined,
+        tileRect ? JsiSkRect.fromValue(this.CanvasKit, tileRect) : undefined
       )
     );
   }

package/src/skia/web/JsiSkPictureRecorder.ts

@@ -3,9 +3,10 @@ import type { CanvasKit, PictureRecorder } from "canvaskit-wasm";
 import type { SkRect } from "../types";
 import type { SkPictureRecorder } from "../types/Picture/PictureRecorder";
 
-import { HostObject, toValue } from "./Host";
+import { HostObject } from "./Host";
 import { JsiSkCanvas } from "./JsiSkCanvas";
 import { JsiSkPicture } from "./JsiSkPicture";
+import { JsiSkRect } from "./JsiSkRect";
 
 export class JsiSkPictureRecorder
   extends HostObject<PictureRecorder, "PictureRecorder">
@@ -18,7 +19,7 @@ export class JsiSkPictureRecorder
   beginRecording(bounds: SkRect) {
     return new JsiSkCanvas(
       this.CanvasKit,
-      this.ref.beginRecording(toValue(bounds))
+      this.ref.beginRecording(JsiSkRect.fromValue(this.CanvasKit, bounds))
     );
   }
 

package/src/skia/web/JsiSkPoint.ts

@@ -2,9 +2,19 @@ import type { CanvasKit, Point } from "canvaskit-wasm";
 
 import type { SkPoint } from "../types";
 
-import { HostObject } from "./Host";
+import { BaseHostObject } from "./Host";
+
+export class JsiSkPoint
+  extends BaseHostObject<Point, "Point">
+  implements SkPoint
+{
+  static fromValue(point: SkPoint) {
+    if (point instanceof JsiSkPoint) {
+      return point.ref;
+    }
+    return new Float32Array([point.x, point.y]);
+  }
 
-export class JsiSkPoint extends HostObject<Point, "Point"> implements SkPoint {
   constructor(CanvasKit: CanvasKit, ref: Point) {
     super(CanvasKit, ref, "Point");
   }

package/src/skia/web/JsiSkRRect.ts

@@ -2,10 +2,13 @@ import type { CanvasKit, RRect } from "canvaskit-wasm";
 
 import type { SkRRect } from "../types";
 
-import { HostObject } from "./Host";
+import { BaseHostObject } from "./Host";
 import { JsiSkRect } from "./JsiSkRect";
 
-export class JsiSkRRect extends HostObject<RRect, "RRect"> implements SkRRect {
+export class JsiSkRRect
+  extends BaseHostObject<RRect, "RRect">
+  implements SkRRect
+{
   static fromValue(CanvasKit: CanvasKit, rect: SkRRect) {
     if (rect instanceof JsiSkRect) {
       return rect.ref;

package/src/skia/web/JsiSkRSXform.ts

@@ -4,7 +4,7 @@ import type { SkRSXform } from "../types";
 
 import { HostObject } from "./Host";
 
-type RSXform = Float32Array;
+export type RSXform = Float32Array;
 
 export class JsiSkRSXform
   extends HostObject<RSXform, "RSXform">

package/src/skia/web/JsiSkRect.ts

@@ -2,9 +2,9 @@ import type { CanvasKit, Rect } from "canvaskit-wasm";
 
 import type { SkRect } from "../types";
 
-import { HostObject } from "./Host";
+import { BaseHostObject } from "./Host";
 
-export class JsiSkRect extends HostObject<Rect, "Rect"> implements SkRect {
+export class JsiSkRect extends BaseHostObject<Rect, "Rect"> implements SkRect {
   static fromValue(CanvasKit: CanvasKit, rect: SkRect) {
     if (rect instanceof JsiSkRect) {
       return rect.ref;

package/src/skia/web/JsiSkRuntimeEffect.ts

@@ -3,7 +3,8 @@ import type { CanvasKit, RuntimeEffect } from "canvaskit-wasm";
 import type { SkMatrix, SkShader } from "../types";
 import type { SkRuntimeEffect } from "../types/RuntimeEffect/RuntimeEffect";
 
-import { HostObject, toValue } from "./Host";
+import { HostObject } from "./Host";
+import { JsiSkMatrix } from "./JsiSkMatrix";
 import { JsiSkShader } from "./JsiSkShader";
 
 export class JsiSkRuntimeEffect
@@ -19,7 +20,9 @@ export class JsiSkRuntimeEffect
       this.CanvasKit,
       this.ref.makeShader(
         uniforms,
-        localMatrix !== undefined ? toValue(localMatrix) : localMatrix
+        localMatrix !== undefined
+          ? JsiSkMatrix.fromValue(localMatrix)
+          : localMatrix
       )
     );
   }
@@ -33,8 +36,10 @@ export class JsiSkRuntimeEffect
       this.CanvasKit,
       this.ref.makeShaderWithChildren(
         uniforms,
-        children?.map((child) => toValue(child)),
-        localMatrix !== undefined ? toValue(localMatrix) : localMatrix
+        children?.map((child) => JsiSkShader.fromValue(child)),
+        localMatrix !== undefined
+          ? JsiSkMatrix.fromValue(localMatrix)
+          : localMatrix
       )
     );
   }

package/src/skia/web/JsiSkShaderFactory.ts

@@ -10,7 +10,9 @@ import type {
 } from "../types";
 import type { ShaderFactory } from "../types/Shader/ShaderFactory";
 
-import { Host, toValue, ckEnum } from "./Host";
+import { Host, ckEnum } from "./Host";
+import { JsiSkMatrix } from "./JsiSkMatrix";
+import { JsiSkPoint } from "./JsiSkPoint";
 import { JsiSkShader } from "./JsiSkShader";
 
 export class JsiSkShaderFactory extends Host implements ShaderFactory {
@@ -30,12 +32,14 @@ export class JsiSkShaderFactory extends Host implements ShaderFactory {
     return new JsiSkShader(
       this.CanvasKit,
       this.CanvasKit.Shader.MakeLinearGradient(
-        toValue(start),
-        toValue(end),
+        JsiSkPoint.fromValue(start),
+        JsiSkPoint.fromValue(end),
         colors,
         pos,
         ckEnum(mode),
-        localMatrix === undefined ? undefined : toValue(localMatrix),
+        localMatrix === undefined
+          ? undefined
+          : JsiSkMatrix.fromValue(localMatrix),
         flags
       )
     );
@@ -53,12 +57,14 @@ export class JsiSkShaderFactory extends Host implements ShaderFactory {
     return new JsiSkShader(
       this.CanvasKit,
       this.CanvasKit.Shader.MakeRadialGradient(
-        toValue(center),
+        JsiSkPoint.fromValue(center),
         radius,
         colors,
         pos,
         ckEnum(mode),
-        localMatrix === undefined ? undefined : toValue(localMatrix),
+        localMatrix === undefined
+          ? undefined
+          : JsiSkMatrix.fromValue(localMatrix),
         flags
       )
     );
@@ -78,14 +84,16 @@ export class JsiSkShaderFactory extends Host implements ShaderFactory {
     return new JsiSkShader(
       this.CanvasKit,
       this.CanvasKit.Shader.MakeTwoPointConicalGradient(
-        toValue(start),
+        JsiSkPoint.fromValue(start),
         startRadius,
-        toValue(end),
+        JsiSkPoint.fromValue(end),
         endRadius,
         colors,
         pos,
         ckEnum(mode),
-        localMatrix === undefined ? undefined : toValue(localMatrix),
+        localMatrix === undefined
+          ? undefined
+          : JsiSkMatrix.fromValue(localMatrix),
         flags
       )
     );
@@ -112,7 +120,7 @@ export class JsiSkShaderFactory extends Host implements ShaderFactory {
         ckEnum(mode),
         localMatrix === undefined || localMatrix === null
           ? undefined
-          : toValue(localMatrix),
+          : JsiSkMatrix.fromValue(localMatrix),
         flags,
         startAngleInDegrees,
         endAngleInDegrees
@@ -165,17 +173,18 @@ export class JsiSkShaderFactory extends Host implements ShaderFactory {
   MakeBlend(mode: BlendMode, one: SkShader, two: SkShader) {
     return new JsiSkShader(
       this.CanvasKit,
-      this.CanvasKit.Shader.MakeBlend(ckEnum(mode), toValue(one), toValue(two))
+      this.CanvasKit.Shader.MakeBlend(
+        ckEnum(mode),
+        JsiSkShader.fromValue(one),
+        JsiSkShader.fromValue(two)
+      )
     );
   }
 
   MakeColor(color: SkColor) {
     return new JsiSkShader(
       this.CanvasKit,
-      this.CanvasKit.Shader.MakeColor(
-        toValue(color),
-        this.CanvasKit.ColorSpace.SRGB
-      )
+      this.CanvasKit.Shader.MakeColor(color, this.CanvasKit.ColorSpace.SRGB)
     );
   }
 }

package/src/skia/web/JsiSkSurface.ts

@@ -2,9 +2,10 @@ import type { CanvasKit, Surface } from "canvaskit-wasm";
 
 import type { SkCanvas, SkImage, SkRect, SkSurface } from "../types";
 
-import { HostObject, toUndefinedableValue } from "./Host";
+import { HostObject } from "./Host";
 import { JsiSkCanvas } from "./JsiSkCanvas";
 import { JsiSkImage } from "./JsiSkImage";
+import { JsiSkRect } from "./JsiSkRect";
 
 export class JsiSkSurface
   extends HostObject<Surface, "Surface">
@@ -19,7 +20,11 @@ export class JsiSkSurface
   }
 
   makeImageSnapshot(bounds?: SkRect): SkImage {
-    const image = this.ref.makeImageSnapshot(toUndefinedableValue(bounds));
+    const image = this.ref.makeImageSnapshot(
+      bounds
+        ? Array.from(JsiSkRect.fromValue(this.CanvasKit, bounds))
+        : undefined
+    );
     return new JsiSkImage(this.CanvasKit, image);
   }
 }

package/src/skia/web/JsiSkTextBlobFactory.ts

@@ -1,10 +1,14 @@
 import type { CanvasKit } from "canvaskit-wasm";
 
-import type { SkFont, SkRSXform } from "../types";
+import type { SkFont } from "../types";
 import type { TextBlobFactory } from "../types/TextBlob";
+import type { SkRSXform } from "../types/RSXform";
 
-import { Host, toValue } from "./Host";
+import { Host } from "./Host";
+import { JsiSkFont } from "./JsiSkFont";
 import { JsiSkTextBlob } from "./JsiSkTextBlob";
+import type { RSXform } from "./JsiSkRSXform";
+import { JsiSkRSXform } from "./JsiSkRSXform";
 
 export class JsiSkTextBlobFactory extends Host implements TextBlobFactory {
   constructor(CanvasKit: CanvasKit) {
@@ -14,14 +18,14 @@ export class JsiSkTextBlobFactory extends Host implements TextBlobFactory {
   MakeFromText(str: string, font: SkFont) {
     return new JsiSkTextBlob(
       this.CanvasKit,
-      this.CanvasKit.TextBlob.MakeFromText(str, toValue(font))
+      this.CanvasKit.TextBlob.MakeFromText(str, JsiSkFont.fromValue(font))
     );
   }
 
   MakeFromGlyphs(glyphs: number[], font: SkFont) {
     return new JsiSkTextBlob(
       this.CanvasKit,
-      this.CanvasKit.TextBlob.MakeFromGlyphs(glyphs, toValue(font))
+      this.CanvasKit.TextBlob.MakeFromGlyphs(glyphs, JsiSkFont.fromValue(font))
     );
   }
 
@@ -30,8 +34,10 @@ export class JsiSkTextBlobFactory extends Host implements TextBlobFactory {
       this.CanvasKit,
       this.CanvasKit.TextBlob.MakeFromRSXform(
         str,
-        rsxforms.map((f) => Array.from(toValue<Float32Array>(f))).flat(),
-        toValue(font)
+        rsxforms
+          .map((f) => Array.from(JsiSkRSXform.fromValue<RSXform>(f)))
+          .flat(),
+        JsiSkFont.fromValue(font)
       )
     );
   }
@@ -41,8 +47,8 @@ export class JsiSkTextBlobFactory extends Host implements TextBlobFactory {
       this.CanvasKit,
       this.CanvasKit.TextBlob.MakeFromRSXformGlyphs(
         glyphs,
-        rsxforms.map((f) => toValue(f)),
-        toValue(font)
+        rsxforms.map((f) => JsiSkRSXform.fromValue(f)),
+        JsiSkFont.fromValue(font)
       )
     );
   }

package/src/skia/web/JsiSkTypefaceFactory.tsx

@@ -2,7 +2,7 @@ import type { CanvasKit } from "canvaskit-wasm";
 
 import type { SkData, TypefaceFactory } from "../types";
 
-import { Host, toValue } from "./Host";
+import { Host } from "./Host";
 import { JsiSkTypeface } from "./JsiSkTypeface";
 
 export class JsiSkTypefaceFactory extends Host implements TypefaceFactory {
@@ -11,7 +11,9 @@ export class JsiSkTypefaceFactory extends Host implements TypefaceFactory {
   }
 
   MakeFreeTypeFaceFromData(data: SkData) {
-    const tf = this.CanvasKit.Typeface.MakeFreeTypeFaceFromData(toValue(data));
+    const tf = this.CanvasKit.Typeface.MakeFreeTypeFaceFromData(
+      JsiSkTypeface.fromValue(data)
+    );
     if (tf === null) {
       return null;
     }

package/src/skia/web/JsiSkia.ts

@@ -17,7 +17,6 @@ import { Color } from "./JsiSkColor";
 import { JsiSkSurfaceFactory } from "./JsiSkSurfaceFactory";
 import { JsiSkRRect } from "./JsiSkRRect";
 import { JsiSkRSXform } from "./JsiSkRSXform";
-import { toValue } from "./Host";
 import { JsiSkContourMeasureIter } from "./JsiSkContourMeasureIter";
 import { JsiSkPictureRecorder } from "./JsiSkPictureRecorder";
 import { JsiSkPictureFactory } from "./JsiSkPictureFactory";
@@ -36,6 +35,8 @@ import { JsiSkSVGFactory } from "./JsiSkSVGFactory";
 import { JsiSkTextBlobFactory } from "./JsiSkTextBlobFactory";
 import { JsiSkFont } from "./JsiSkFont";
 import { MakeVertices } from "./JsiSkVerticesFactory";
+import { JsiSkPath } from "./JsiSkPath";
+import { JsiSkTypeface } from "./JsiSkTypeface";
 
 export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
   Point: (x: number, y: number) =>
@@ -44,7 +45,10 @@ export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
     throw new Error("Not implemented on React Native Web");
   },
   RRectXY: (rect: SkRect, rx: number, ry: number) =>
-    new JsiSkRRect(CanvasKit, CanvasKit.RRectXY(toValue(rect), rx, ry)),
+    new JsiSkRRect(
+      CanvasKit,
+      CanvasKit.RRectXY(JsiSkRect.fromValue(CanvasKit, rect), rx, ry)
+    ),
   RSXform: (scos: number, ssin: number, tx: number, ty: number) =>
     new JsiSkRSXform(CanvasKit, Float32Array.of(scos, ssin, tx, ty)),
   Color,
@@ -55,9 +59,17 @@ export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
   ): SkContourMeasureIter =>
     new JsiSkContourMeasureIter(
       CanvasKit,
-      new CanvasKit.ContourMeasureIter(toValue(path), forceClosed, resScale)
+      new CanvasKit.ContourMeasureIter(
+        JsiSkPath.fromValue(path),
+        forceClosed,
+        resScale
+      )
     ),
-  Paint: () => new JsiSkPaint(CanvasKit, new CanvasKit.Paint()),
+  Paint: () => {
+    const paint = new JsiSkPaint(CanvasKit, new CanvasKit.Paint());
+    paint.setAntiAlias(true);
+    return paint;
+  },
   PictureRecorder: () =>
     new JsiSkPictureRecorder(CanvasKit, new CanvasKit.PictureRecorder()),
   Picture: new JsiSkPictureFactory(CanvasKit),
@@ -74,7 +86,7 @@ export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
     new JsiSkFont(
       CanvasKit,
       new CanvasKit.Font(
-        typeface === undefined ? null : toValue(typeface),
+        typeface === undefined ? null : JsiSkTypeface.fromValue(typeface),
         size
       )
     ),