⭐️ Fix and refactorize antialiasing defaults

docs/docs/paint/overview.md

@@ -12,13 +12,14 @@ There is also a `<Paint />` component which can be assigned directly to a drawin
 
 The following painting attributes can be assigned as properties:
 * [color](properties.md#color)            
-* [blendMode](properties.md#blendMode)     
+* [blendMode](properties.md#blendmode)     
 * [style](properties.md#style)             
-* [strokeWidth](properties.md#strokeWidth) 
-* [strokeJoin](properties.md#strokeJoin)   
-* [strokeCap](properties.md#strokeCap)     
-* [strokeMiter](properties.md#strokeMiter) 
-* [opacity](properties.md#opacity)      
+* [strokeWidth](properties.md#strokewidth) 
+* [strokeJoin](properties.md#strokejoin)   
+* [strokeCap](properties.md#strokecap)     
+* [strokeMiter](properties.md#strokemiter) 
+* [opacity](properties.md#opacity)
+* [antiAlias](properties.md#antialias)            
 
 The following painting attributes can be assigned as children:
 * [Shaders](/docs/shaders/overview) 

docs/docs/paint/properties.md

@@ -13,7 +13,7 @@ The following children can also be assigned to a Paint:
 * [Mask Filters](/docs/mask-filters)
 * [Path Effects](/docs/path-effects)
 
-## Color
+## color
 
 Sets the alpha and RGB used when stroking and filling.
 The color is a string or a number.
@@ -28,7 +28,7 @@ import {Paint} from "@shopify/react-native-skia";
 </>
 ```
 
-## Opacity
+## opacity
 
 Replaces alpha, leaving RGBA unchanged. 0 means fully transparent, 1.0 means opaque.
 When setting opacity in a Group component, the alpha component of all descending colors will inherit that value.
@@ -55,31 +55,35 @@ export const OpacityDemo = () => {
 
 ![Opacity](./assets/opacity.png)
 
-## Blend Mode
+## blendMode
 
 Sets the blend mode that is, the mode used to combine source color with destination color.
 The following values are available: `clear`, `src`, `dst`, `srcOver`, `dstOver`, `srcIn`, `dstIn`, `srcOut`, `dstOut`,
 `srcATop`, `dstATop`, `xor`, `plus`, `modulate`, `screen`, `overlay`, `darken`, `lighten`, `colorDodge`, `colorBurn`, `hardLight`,
 `softLight`, `difference`, `exclusion`, `multiply`, `hue`, `saturation`, `color`, `luminosity`.
 
-## Style
+## style
 
 The paint style can be `fill` (default) or `stroke`.
 
-## Stroke Width
+## strokeWidth
 
 Thickness of the pen used to outline the shape.
 
-## Stroke Join
+## strokeJoin
 
 Sets the geometry drawn at the corners of strokes.
 Values can be `bevel`, `miter`, or `round`.
 
-## Stroke Cap
+## strokeCap
 
 Returns the geometry drawn at the beginning and end of strokes.
 Values can be `butt`, `round`, or `square`.
 
-## Stroke Miter
+## strokeMiter
 
-Limit at which a sharp corner is drawn beveled.
+Limit at which a sharp corner is drawn beveled.
+
+## antiAlias
+
+Requests, but does not require, that edge pixels draw opaque or with partial transparency.

package/src/renderer/Canvas.tsx

@@ -29,6 +29,7 @@ import { debug as hostDebug, skHostConfig } from "./HostConfig";
 import { vec } from "./processors";
 import { Container } from "./nodes";
 import { DependencyManager } from "./DependencyManager";
+import { SkiaPaint } from "./processors/Paint";
 
 const CanvasContext = React.createContext<SkiaReadonlyValue<{
   width: number;
@@ -112,8 +113,7 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
         ) {
           canvasCtx.current = { width, height };
         }
-        const paint = Skia.Paint();
-        paint.setAntiAlias(true);
+        const paint = SkiaPaint();
         const ctx = {
           width,
           height,

package/src/renderer/components/Paint.tsx

@@ -2,9 +2,8 @@ import type { ReactNode } from "react";
 import React, { useRef, useMemo, forwardRef, useImperativeHandle } from "react";
 
 import type { SkPaint } from "../../skia";
-import { Skia } from "../../skia";
 import type { CustomPaintProps, AnimatedProps } from "../processors";
-import { processPaint } from "../processors";
+import { SkiaPaint, processPaint } from "../processors";
 import { createDeclaration } from "../nodes";
 
 export const usePaintRef = () => useRef<SkPaint>(null);
@@ -15,7 +14,7 @@ export interface PaintProps extends Omit<CustomPaintProps, "paint"> {
 
 export const Paint = forwardRef<SkPaint, AnimatedProps<PaintProps>>(
   (props, ref) => {
-    const paint = useMemo(() => Skia.Paint(), []);
+    const paint = useMemo(() => SkiaPaint(), []);
     useImperativeHandle(ref, () => paint, [paint]);
     const onDeclare = useMemo(
       () =>

package/src/renderer/processors/Paint.ts

@@ -17,6 +17,12 @@ import type { SkPaint, Color, SkImageFilter } from "../../skia";
 import type { DeclarationResult } from "../nodes";
 export type SkEnum<T> = Uncapitalize<keyof T extends string ? keyof T : never>;
 
+export const SkiaPaint = () => {
+  const paint = Skia.Paint();
+  paint.setAntiAlias(true);
+  return paint;
+};
+
 export interface ChildrenProps {
   children?: ReactNode | ReactNode[];
 }
@@ -32,6 +38,7 @@ export interface CustomPaintProps extends ChildrenProps {
   strokeCap?: SkEnum<typeof StrokeCap>;
   strokeMiter?: number;
   opacity?: number;
+  antiAlias?: boolean;
 }
 
 export const enumKey = <K extends string>(k: K) =>
@@ -50,6 +57,7 @@ export const processPaint = (
     strokeCap,
     strokeMiter,
     opacity,
+    antiAlias,
   }: CustomPaintProps,
   children: DeclarationResult[]
 ) => {
@@ -85,6 +93,9 @@ export const processPaint = (
   if (opacity !== undefined) {
     paint.setAlphaf(opacity);
   }
+  if (antiAlias !== undefined) {
+    paint.setAntiAlias(antiAlias);
+  }
   children.forEach((child) => {
     if (isShader(child)) {
       paint.setShader(child);

package/src/skia/Paint/usePaint.ts

@@ -1,7 +1,7 @@
 import type { DependencyList } from "react";
 import { useMemo } from "react";
 
-import { Skia } from "../Skia";
+import { SkiaPaint } from "../../renderer/processors/Paint";
 
 import type { SkPaint } from "./Paint";
 
@@ -13,8 +13,7 @@ export const usePaint = (
   deps?: DependencyList
 ) =>
   useMemo(() => {
-    const p = Skia.Paint();
-    p.setAntiAlias(true);
+    const p = SkiaPaint();
     if (initializer) {
       initializer(p);
     }